Configure Maven repository for unionflow-server-api dependency
This commit is contained in:
dahoud
@@ -0,0 +1,73 @@
|
||||
<!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">Demandes d'Aide Approuvées - UnionFlow</ui:define>
|
||||
<ui:define name="content">
|
||||
<h:form id="formApproved">
|
||||
<p:messages id="messages" showDetail="true" closable="true"/>
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="card mb-3">
|
||||
<div class="flex justify-content-between align-items-center flex-column md:flex-row">
|
||||
<div>
|
||||
<h3 class="m-0">
|
||||
<i class="pi pi-check-circle text-success mr-2"></i>
|
||||
Demandes d'Aide Approuvées
|
||||
</h3>
|
||||
<p class="text-600 m-0 mt-2">
|
||||
Liste des demandes d'aide approuvées et en cours de traitement
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liste des demandes approuvées -->
|
||||
<div class="card">
|
||||
<h5 class="mb-3">Demandes Approuvées</h5>
|
||||
|
||||
<p:dataTable id="dtApproved"
|
||||
var="demande"
|
||||
value="#{demandesAideBean.demandesFiltrees}"
|
||||
paginator="true"
|
||||
rows="10"
|
||||
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
|
||||
rowsPerPageTemplate="5,10,25"
|
||||
currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords}">
|
||||
|
||||
<p:column headerText="Demandeur" sortBy="#{demande.demandeur}">
|
||||
<div>
|
||||
<div class="font-medium">#{demande.demandeur}</div>
|
||||
<small class="text-600">#{demande.telephone}</small>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{demande.type}">
|
||||
<p:tag value="#{demande.typeLibelle}" severity="#{demande.typeSeverity}" icon="pi #{demande.typeIcon}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant accordé" sortBy="#{demande.montantAccorde}">
|
||||
<div class="font-bold text-green-500">#{demande.montantAccorde} FCFA</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date approbation" sortBy="#{demande.dateDemande}">
|
||||
<h:outputText value="#{demande.dateDemande}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
||||
</h:outputText>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:150px">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-info"
|
||||
action="#{demandesAideBean.voirDetails(demande)}"
|
||||
title="Voir détails"/>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,327 @@
|
||||
<!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">À Propos d'UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
|
||||
<!-- En-tête principal -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-6 text-center">
|
||||
<div class="mb-4">
|
||||
<i class="pi pi-heart-fill text-6xl text-primary mb-3"></i>
|
||||
<h1 class="text-900 font-bold text-5xl mb-3">UnionFlow</h1>
|
||||
<p class="text-600 text-xl mb-4">
|
||||
La solution complète de gestion d'associations et organisations
|
||||
</p>
|
||||
<div class="flex align-items-center justify-content-center gap-3">
|
||||
<p:tag value="Version 2.1.3" severity="success" styleClass="text-lg p-2" />
|
||||
<p:tag value="Build 20240118" severity="info" styleClass="text-lg p-2" />
|
||||
<p:tag value="Stable" severity="secondary" styleClass="text-lg p-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques système -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">99.9%</div>
|
||||
<div class="text-900 font-semibold mb-1">Disponibilité</div>
|
||||
<div class="text-600 text-sm">30 derniers jours</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">2.3s</div>
|
||||
<div class="text-900 font-semibold mb-1">Temps de Réponse</div>
|
||||
<div class="text-600 text-sm">Moyen</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">15,647</div>
|
||||
<div class="text-900 font-semibold mb-1">Utilisateurs</div>
|
||||
<div class="text-600 text-sm">Actifs ce mois</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-orange-500 mb-2">4.8★</div>
|
||||
<div class="text-900 font-semibold mb-1">Satisfaction</div>
|
||||
<div class="text-600 text-sm">Note moyenne</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mission et valeurs -->
|
||||
<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-flag text-primary mr-2"></i>
|
||||
Notre Mission
|
||||
</h4>
|
||||
<p class="text-700 line-height-3 mb-4">
|
||||
UnionFlow a été créé avec la vision de simplifier et moderniser la gestion des associations,
|
||||
coopératives et organisations communautaires. Notre objectif est de fournir des outils
|
||||
puissants et accessibles qui permettent aux dirigeants de se concentrer sur leur mission
|
||||
plutôt que sur la paperasse administrative.
|
||||
</p>
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-4">
|
||||
<h6 class="text-blue-800 font-semibold mb-2">
|
||||
<i class="pi pi-lightbulb mr-2"></i>Vision 2025
|
||||
</h6>
|
||||
<p class="text-blue-700 text-sm mb-0">
|
||||
Devenir la plateforme de référence pour la gestion d'organisations en Afrique
|
||||
de l'Ouest avec plus de 100,000 utilisateurs actifs.
|
||||
</p>
|
||||
</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-heart text-red-500 mr-2"></i>
|
||||
Nos Valeurs
|
||||
</h4>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<i class="pi pi-users text-blue-500 text-xl mb-2"></i>
|
||||
<h6 class="text-900 font-semibold mb-1">Communauté</h6>
|
||||
<p class="text-600 text-sm">Favoriser l'entraide et la collaboration</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<i class="pi pi-shield text-green-500 text-xl mb-2"></i>
|
||||
<h6 class="text-900 font-semibold mb-1">Confiance</h6>
|
||||
<p class="text-600 text-sm">Sécurité et transparence totales</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<i class="pi pi-cog text-purple-500 text-xl mb-2"></i>
|
||||
<h6 class="text-900 font-semibold mb-1">Innovation</h6>
|
||||
<p class="text-600 text-sm">Solutions modernes et évolutives</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div>
|
||||
<i class="pi pi-globe text-orange-500 text-xl mb-2"></i>
|
||||
<h6 class="text-900 font-semibold mb-1">Accessibilité</h6>
|
||||
<p class="text-600 text-sm">Pour tous, partout, sur tout appareil</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informations techniques -->
|
||||
<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-server mr-2"></i>
|
||||
Informations Système
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<h6 class="text-900 font-semibold mb-3">🏗️ Architecture</h6>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Framework</div>
|
||||
<div class="text-900 font-semibold">Quarkus 3.15.1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Interface</div>
|
||||
<div class="text-900 font-semibold">PrimeFaces 14.0.5</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Base de données</div>
|
||||
<div class="text-900 font-semibold">PostgreSQL 15</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Cache</div>
|
||||
<div class="text-900 font-semibold">Redis 7.2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<h6 class="text-900 font-semibold mb-3">🔧 Environnement</h6>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">JVM</div>
|
||||
<div class="text-900 font-semibold">OpenJDK 21</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Serveur</div>
|
||||
<div class="text-900 font-semibold">Kubernetes</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">CDN</div>
|
||||
<div class="text-900 font-semibold">Cloudflare</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Monitoring</div>
|
||||
<div class="text-900 font-semibold">Prometheus</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Équipe et crédits -->
|
||||
<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>
|
||||
Équipe de Développement
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<div class="w-6rem h-6rem border-circle bg-primary-100 flex align-items-center justify-content-center mx-auto mb-3">
|
||||
<i class="pi pi-crown text-primary text-3xl"></i>
|
||||
</div>
|
||||
<h6 class="text-900 font-semibold mb-2">Équipe Core</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Architectes et développeurs principaux responsables
|
||||
de la vision produit et de l'architecture technique.
|
||||
</p>
|
||||
<div class="flex align-items-center justify-content-center gap-2">
|
||||
<p:tag value="5 développeurs" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<div class="w-6rem h-6rem border-circle bg-green-100 flex align-items-center justify-content-center mx-auto mb-3">
|
||||
<i class="pi pi-wrench text-green-500 text-3xl"></i>
|
||||
</div>
|
||||
<h6 class="text-900 font-semibold mb-2">Support Technique</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Équipe dédiée à l'assistance utilisateurs,
|
||||
maintenance et résolution des incidents.
|
||||
</p>
|
||||
<div class="flex align-items-center justify-content-center gap-2">
|
||||
<p:tag value="3 techniciens" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<div class="w-6rem h-6rem border-circle bg-purple-100 flex align-items-center justify-content-center mx-auto mb-3">
|
||||
<i class="pi pi-palette text-purple-500 text-3xl"></i>
|
||||
</div>
|
||||
<h6 class="text-900 font-semibold mb-2">UX/UI Design</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Designers spécialisés dans l'expérience utilisateur
|
||||
et l'interface moderne.
|
||||
</p>
|
||||
<div class="flex align-items-center justify-content-center gap-2">
|
||||
<p:tag value="2 designers" severity="help" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact et liens -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4 text-center">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-send mr-2"></i>
|
||||
Nous Contacter
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-envelope text-3xl text-blue-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Email</h6>
|
||||
<p class="text-600 text-sm">contact@unionflow.dev</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-globe text-3xl text-green-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Site Web</h6>
|
||||
<p class="text-600 text-sm">www.unionflow.dev</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-github text-3xl text-purple-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">GitHub</h6>
|
||||
<p class="text-600 text-sm">github.com/unionflow</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-twitter text-3xl text-blue-400 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Twitter</h6>
|
||||
<p class="text-600 text-sm">@unionflow_dev</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-4 border-top-1 border-200">
|
||||
<p class="text-600 text-sm mb-2">
|
||||
© 2024 UnionFlow. Tous droits réservés.
|
||||
</p>
|
||||
<p class="text-500 text-xs">
|
||||
Développé avec ❤️ pour les communautés d'Afrique de l'Ouest par Lions Dev
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
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">
|
||||
|
||||
<ui:param name="page" value="#{demandesAideBean}"/>
|
||||
<ui:define name="title">Demande d'Aide - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<h:form id="formDemande">
|
||||
<p:messages id="messages" showDetail="true" closable="true"/>
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="card mb-3">
|
||||
<div class="flex justify-content-between align-items-center flex-column md:flex-row">
|
||||
<div>
|
||||
<h3 class="m-0">
|
||||
<i class="pi pi-heart text-primary mr-2"></i>
|
||||
Nouvelle Demande d'Aide
|
||||
</h3>
|
||||
<p class="text-600 m-0 mt-2">
|
||||
Soumettez une demande d'aide pour vous ou un membre de votre organisation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire de demande -->
|
||||
<div class="card">
|
||||
<h5 class="mb-3">Informations de la Demande</h5>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="typeAide" value="Type d'aide *"/>
|
||||
<p:selectOneMenu id="typeAide" value="#{demandesAideBean.nouvelleDemande.type}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionnez un type" itemValue=""/>
|
||||
<f:selectItem itemLabel="Aide Médicale" itemValue="AIDE_MEDICALE"/>
|
||||
<f:selectItem itemLabel="Aide Alimentaire" itemValue="AIDE_ALIMENTAIRE"/>
|
||||
<f:selectItem itemLabel="Aide Éducative" itemValue="AIDE_EDUCATIVE"/>
|
||||
<f:selectItem itemLabel="Aide Logement" itemValue="AIDE_LOGEMENT"/>
|
||||
<f:selectItem itemLabel="Aide d'Urgence" itemValue="AIDE_URGENCE"/>
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="urgence" value="Niveau d'urgence *"/>
|
||||
<p:selectOneMenu id="urgence" value="#{demandesAideBean.nouvelleDemande.urgence}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionnez un niveau" itemValue=""/>
|
||||
<f:selectItem itemLabel="Faible" itemValue="FAIBLE"/>
|
||||
<f:selectItem itemLabel="Moyenne" itemValue="MOYENNE"/>
|
||||
<f:selectItem itemLabel="Haute" itemValue="HAUTE"/>
|
||||
<f:selectItem itemLabel="Critique" itemValue="CRITIQUE"/>
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="demandeur" value="Nom du demandeur *"/>
|
||||
<p:inputText id="demandeur" value="#{demandesAideBean.nouvelleDemande.demandeur}"
|
||||
styleClass="w-full" required="true"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="telephone" value="Téléphone *"/>
|
||||
<p:inputText id="telephone" value="#{demandesAideBean.nouvelleDemande.telephone}"
|
||||
styleClass="w-full" required="true"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="email" value="Email"/>
|
||||
<p:inputText id="email" value="#{demandesAideBean.nouvelleDemande.email}"
|
||||
styleClass="w-full"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="localisation" value="Localisation *"/>
|
||||
<p:inputText id="localisation" value="#{demandesAideBean.nouvelleDemande.localisation}"
|
||||
styleClass="w-full" required="true"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="montantDemande" value="Montant demandé (FCFA) *"/>
|
||||
<p:inputNumber id="montantDemande" value="#{demandesAideBean.nouvelleDemande.montantDemande}"
|
||||
styleClass="w-full" required="true" minValue="0"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="dateLimite" value="Date limite souhaitée"/>
|
||||
<p:calendar id="dateLimite" value="#{demandesAideBean.nouvelleDemande.dateLimite}"
|
||||
styleClass="w-full" pattern="dd/MM/yyyy"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<p:outputLabel for="motif" value="Motif de la demande *"/>
|
||||
<p:inputText id="motif" value="#{demandesAideBean.nouvelleDemande.motif}"
|
||||
styleClass="w-full" required="true"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<p:outputLabel for="description" value="Description détaillée *"/>
|
||||
<p:inputTextarea id="description" value="#{demandesAideBean.nouvelleDemande.description}"
|
||||
rows="5" styleClass="w-full" required="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler"/>
|
||||
<ui:param name="icon" value="pi pi-times"/>
|
||||
<ui:param name="outcome" value="dashboardPage"/>
|
||||
</ui:include>
|
||||
<p:commandButton value="Soumettre la demande"
|
||||
icon="pi pi-send"
|
||||
styleClass="ui-button-success"
|
||||
action="#{demandesAideBean.creerDemande}"
|
||||
update="@form"
|
||||
oncomplete="if(!args.validationFailed) {PF('dlgConfirmation').show();}"/>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
|
||||
<!-- Dialog de confirmation -->
|
||||
<p:dialog header="Demande soumise" widgetVar="dlgConfirmation" modal="true" width="400">
|
||||
<div class="text-center p-4">
|
||||
<i class="pi pi-check-circle text-green-500 text-6xl mb-3"></i>
|
||||
<h4 class="mb-2">Votre demande a été soumise avec succès</h4>
|
||||
<p class="text-600">Elle sera traitée dans les plus brefs délais.</p>
|
||||
<div class="flex justify-content-center gap-2 mt-4">
|
||||
<p:commandButton value="OK"
|
||||
styleClass="ui-button-primary"
|
||||
onclick="PF('dlgConfirmation').hide(); window.location.href='#{request.contextPath}/pages/secure/dashboard.xhtml';"/>
|
||||
</div>
|
||||
</div>
|
||||
</p:dialog>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,170 @@
|
||||
<!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">Documentation Complète - 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-info-circle text-blue-500 mr-3"></i>
|
||||
Documentation Complète
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Documentation technique et fonctionnelle d'UnionFlow
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Version PDF"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-file-pdf" />
|
||||
<p:commandButton value="API Docs"
|
||||
styleClass="p-button-info p-button-outlined"
|
||||
icon="pi pi-code" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">45</div>
|
||||
<div class="text-900 font-semibold mb-1">Articles</div>
|
||||
<div class="text-600 text-sm">Documentation complète</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">12</div>
|
||||
<div class="text-900 font-semibold mb-1">Mis à Jour</div>
|
||||
<div class="text-600 text-sm">Ce mois-ci</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">6</div>
|
||||
<div class="text-900 font-semibold mb-1">Catégories</div>
|
||||
<div class="text-600 text-sm">Thématiques</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-orange-500 mb-2">3</div>
|
||||
<div class="text-900 font-semibold mb-1">Langages</div>
|
||||
<div class="text-600 text-sm">API supportées</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Catégories de documentation -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round-lg p-4 cursor-pointer transition-all transition-duration-200 h-full">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<i class="pi pi-book text-2xl mr-3 text-blue-500"></i>
|
||||
<p:tag value="GUIDE" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<h5 class="text-900 font-bold mb-2">Guide Utilisateur</h5>
|
||||
<p class="text-600 text-sm mb-3">Documentation complète pour l'utilisation d'UnionFlow</p>
|
||||
<div class="flex justify-content-between">
|
||||
<span class="text-600 text-xs"><i class="pi pi-clock mr-1"></i>15 min</span>
|
||||
<span class="text-600 text-xs"><i class="pi pi-eye mr-1"></i>250</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round-lg p-4 cursor-pointer transition-all transition-duration-200 h-full">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<i class="pi pi-code text-2xl mr-3 text-green-500"></i>
|
||||
<p:tag value="API" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<h5 class="text-900 font-bold mb-2">API REST</h5>
|
||||
<p class="text-600 text-sm mb-3">Documentation complète de l'API REST UnionFlow</p>
|
||||
<div class="flex justify-content-between">
|
||||
<span class="text-600 text-xs"><i class="pi pi-clock mr-1"></i>25 min</span>
|
||||
<span class="text-600 text-xs"><i class="pi pi-eye mr-1"></i>180</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round-lg p-4 cursor-pointer transition-all transition-duration-200 h-full">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<i class="pi pi-cog text-2xl mr-3 text-orange-500"></i>
|
||||
<p:tag value="CONFIG" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<h5 class="text-900 font-bold mb-2">Configuration</h5>
|
||||
<p class="text-600 text-sm mb-3">Guide de configuration et paramétrage du système</p>
|
||||
<div class="flex justify-content-between">
|
||||
<span class="text-600 text-xs"><i class="pi pi-clock mr-1"></i>20 min</span>
|
||||
<span class="text-600 text-xs"><i class="pi pi-eye mr-1"></i>95</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round-lg p-4 cursor-pointer transition-all transition-duration-200 h-full">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<i class="pi pi-wrench text-2xl mr-3 text-red-500"></i>
|
||||
<p:tag value="DEPANNAGE" severity="danger" styleClass="text-xs" />
|
||||
</div>
|
||||
<h5 class="text-900 font-bold mb-2">Dépannage</h5>
|
||||
<p class="text-600 text-sm mb-3">Solutions aux problèmes courants et dépannage</p>
|
||||
<div class="flex justify-content-between">
|
||||
<span class="text-600 text-xs"><i class="pi pi-clock mr-1"></i>30 min</span>
|
||||
<span class="text-600 text-xs"><i class="pi pi-eye mr-1"></i>340</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round-lg p-4 cursor-pointer transition-all transition-duration-200 h-full">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<i class="pi pi-link text-2xl mr-3 text-purple-500"></i>
|
||||
<p:tag value="INTEGRATION" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<h5 class="text-900 font-bold mb-2">Intégrations</h5>
|
||||
<p class="text-600 text-sm mb-3">Intégration avec des systèmes tiers et webhooks</p>
|
||||
<div class="flex justify-content-between">
|
||||
<span class="text-600 text-xs"><i class="pi pi-clock mr-1"></i>35 min</span>
|
||||
<span class="text-600 text-xs"><i class="pi pi-eye mr-1"></i>75</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round-lg p-4 cursor-pointer transition-all transition-duration-200 h-full">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<i class="pi pi-shield text-2xl mr-3 text-indigo-500"></i>
|
||||
<p:tag value="SECURITE" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<h5 class="text-900 font-bold mb-2">Sécurité</h5>
|
||||
<p class="text-600 text-sm mb-3">Bonnes pratiques de sécurité et authentification</p>
|
||||
<div class="flex justify-content-between">
|
||||
<span class="text-600 text-xs"><i class="pi pi-clock mr-1"></i>28 min</span>
|
||||
<span class="text-600 text-xs"><i class="pi pi-eye mr-1"></i>120</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
469
target/classes/META-INF/resources/pages/secure/aide/faq.xhtml
Normal file
469
target/classes/META-INF/resources/pages/secure/aide/faq.xhtml
Normal file
@@ -0,0 +1,469 @@
|
||||
<!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">Questions Fréquentes - 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-question-circle text-blue-500 mr-3"></i>
|
||||
Questions Fréquentes
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Trouvez rapidement des réponses aux questions les plus courantes
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Poser une Question"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-plus"
|
||||
onclick="PF('questionDialog').show()" />
|
||||
<p:commandButton value="Contacter le Support"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-phone" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques -->
|
||||
<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-blue-500 mb-2">47</div>
|
||||
<div class="text-900 font-semibold mb-1">Questions</div>
|
||||
<div class="text-600 text-sm">Dans la FAQ</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">94%</div>
|
||||
<div class="text-900 font-semibold mb-1">Résolution</div>
|
||||
<div class="text-600 text-sm">Taux de satisfaction</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">2.3m</div>
|
||||
<div class="text-900 font-semibold mb-1">Temps Moyen</div>
|
||||
<div class="text-600 text-sm">De réponse</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-orange-500 mb-2">8</div>
|
||||
<div class="text-900 font-semibold mb-1">Catégories</div>
|
||||
<div class="text-600 text-sm">Thématiques</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recherche rapide -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h:form id="rechercheForm">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 lg:col-8">
|
||||
<label for="rechercheQuestion" class="block text-900 font-semibold mb-2">
|
||||
<i class="pi pi-search mr-2"></i>Rechercher dans la FAQ
|
||||
</label>
|
||||
<p:inputText id="rechercheQuestion"
|
||||
placeholder="Tapez votre question ou mots-clés..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-4">
|
||||
<label for="categorieRecherche" class="block text-900 font-semibold mb-2">Catégorie</label>
|
||||
<p:selectOneMenu id="categorieRecherche" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les catégories" itemValue="" />
|
||||
<f:selectItem itemLabel="Compte et Connexion" itemValue="compte" />
|
||||
<f:selectItem itemLabel="Gestion des Membres" itemValue="membres" />
|
||||
<f:selectItem itemLabel="Finances et Cotisations" itemValue="finances" />
|
||||
<f:selectItem itemLabel="Événements" itemValue="evenements" />
|
||||
<f:selectItem itemLabel="Rapports et Exports" itemValue="rapports" />
|
||||
<f:selectItem itemLabel="Administration" itemValue="admin" />
|
||||
<f:selectItem itemLabel="Support Technique" itemValue="technique" />
|
||||
<f:selectItem itemLabel="Sécurité" itemValue="securite" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Questions populaires -->
|
||||
<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-star-fill text-yellow-500 mr-2"></i>
|
||||
Questions les Plus Populaires
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 hover:surface-200 border-round p-3 cursor-pointer transition-duration-200 mb-3">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex-1">
|
||||
<h6 class="text-900 font-semibold mb-1">Comment réinitialiser mon mot de passe ?</h6>
|
||||
<p class="text-600 text-sm mb-0">Procédure de récupération de compte</p>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 ml-3">
|
||||
<p:tag value="3.2k vues" severity="info" styleClass="text-xs" />
|
||||
<i class="pi pi-angle-right text-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 hover:surface-200 border-round p-3 cursor-pointer transition-duration-200 mb-3">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex-1">
|
||||
<h6 class="text-900 font-semibold mb-1">Comment exporter la liste des membres ?</h6>
|
||||
<p class="text-600 text-sm mb-0">Export Excel et PDF personnalisés</p>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 ml-3">
|
||||
<p:tag value="2.8k vues" severity="success" styleClass="text-xs" />
|
||||
<i class="pi pi-angle-right text-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 hover:surface-200 border-round p-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex-1">
|
||||
<h6 class="text-900 font-semibold mb-1">Configurer les notifications email ?</h6>
|
||||
<p class="text-600 text-sm mb-0">Paramétrage des alertes automatiques</p>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 ml-3">
|
||||
<p:tag value="2.1k vues" severity="warning" styleClass="text-xs" />
|
||||
<i class="pi pi-angle-right text-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 hover:surface-200 border-round p-3 cursor-pointer transition-duration-200 mb-3">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex-1">
|
||||
<h6 class="text-900 font-semibold mb-1">Organiser un événement étape par étape ?</h6>
|
||||
<p class="text-600 text-sm mb-0">Guide complet de création d'événement</p>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 ml-3">
|
||||
<p:tag value="1.9k vues" severity="help" styleClass="text-xs" />
|
||||
<i class="pi pi-angle-right text-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 hover:surface-200 border-round p-3 cursor-pointer transition-duration-200 mb-3">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex-1">
|
||||
<h6 class="text-900 font-semibold mb-1">Gérer les rôles et permissions ?</h6>
|
||||
<p class="text-600 text-sm mb-0">Attribution des droits d'accès</p>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 ml-3">
|
||||
<p:tag value="1.7k vues" severity="danger" styleClass="text-xs" />
|
||||
<i class="pi pi-angle-right text-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 hover:surface-200 border-round p-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex-1">
|
||||
<h6 class="text-900 font-semibold mb-1">Problème de connexion lente ?</h6>
|
||||
<p class="text-600 text-sm mb-0">Solutions de performance</p>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2 ml-3">
|
||||
<p:tag value="1.4k vues" severity="info" styleClass="text-xs" />
|
||||
<i class="pi pi-angle-right text-300"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ par catégories -->
|
||||
<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-list mr-2"></i>
|
||||
FAQ par Catégories
|
||||
</h4>
|
||||
|
||||
<p:tabView>
|
||||
<!-- Compte et Connexion -->
|
||||
<p:tab title="🔐 Compte et Connexion">
|
||||
<div class="p-0">
|
||||
<div class="mb-4">
|
||||
<h6 class="text-900 font-semibold mb-3 p-3 surface-100 border-round">
|
||||
<i class="pi pi-key mr-2"></i>Authentification et Sécurité
|
||||
</h6>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between cursor-pointer">
|
||||
<h6 class="text-900 font-semibold mb-2">Comment créer un compte utilisateur ?</h6>
|
||||
<i class="pi pi-angle-down text-600"></i>
|
||||
</div>
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Seul un administrateur peut créer de nouveaux comptes utilisateurs. Rendez-vous dans "Administration" → "Gestion Utilisateurs" → "Nouvel Utilisateur".
|
||||
Remplissez les informations obligatoires et attribuez un rôle approprié.
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Voir le Guide"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-book" />
|
||||
<p:commandButton value="Tutoriel Vidéo"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-video" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between cursor-pointer">
|
||||
<h6 class="text-900 font-semibold mb-2">Pourquoi ma session expire-t-elle souvent ?</h6>
|
||||
<i class="pi pi-angle-down text-600"></i>
|
||||
</div>
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Par sécurité, les sessions expirent après 30 minutes d'inactivité. Vous pouvez cocher "Se souvenir de moi"
|
||||
lors de la connexion pour étendre cette durée. Si le problème persiste, videz le cache de votre navigateur.
|
||||
</p>
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-3">
|
||||
<h6 class="text-blue-800 font-semibold mb-2">
|
||||
<i class="pi pi-info-circle mr-2"></i>Conseil Pro
|
||||
</h6>
|
||||
<p class="text-blue-700 text-sm mb-0">
|
||||
Activez les notifications push pour être alerté avant l'expiration de votre session.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3">
|
||||
<div class="flex align-items-center justify-content-between cursor-pointer">
|
||||
<h6 class="text-900 font-semibold mb-2">Comment activer l'authentification à deux facteurs ?</h6>
|
||||
<i class="pi pi-angle-down text-600"></i>
|
||||
</div>
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Allez dans "Mon Espace Personnel" → "Paramètres Compte" → "Sécurité" → "Authentification 2FA".
|
||||
Scannez le QR code avec Google Authenticator ou Authy, puis validez avec le code généré.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- Gestion des Membres -->
|
||||
<p:tab title="👥 Gestion des Membres">
|
||||
<div class="p-0">
|
||||
<div class="mb-4">
|
||||
<h6 class="text-900 font-semibold mb-3 p-3 surface-100 border-round">
|
||||
<i class="pi pi-users mr-2"></i>Inscription et Modification
|
||||
</h6>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between cursor-pointer">
|
||||
<h6 class="text-900 font-semibold mb-2">Que faire si un membre refuse son adhésion ?</h6>
|
||||
<i class="pi pi-angle-down text-600"></i>
|
||||
</div>
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Rendez-vous dans "Gestion des Adhésions" → "Validation des Demandes", trouvez la demande concernée
|
||||
et cliquez sur "Rejeter". Ajoutez un motif de refus qui sera envoyé automatiquement au demandeur.
|
||||
</p>
|
||||
<div class="surface-orange-50 border-left-3 border-orange-500 p-3">
|
||||
<h6 class="text-orange-800 font-semibold mb-2">
|
||||
<i class="pi pi-exclamation-triangle mr-2"></i>Important
|
||||
</h6>
|
||||
<p class="text-orange-700 text-sm mb-0">
|
||||
Assurez-vous de documenter les raisons du refus pour le suivi administratif.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between cursor-pointer">
|
||||
<h6 class="text-900 font-semibold mb-2">Comment transférer un membre vers une autre organisation ?</h6>
|
||||
<i class="pi pi-angle-down text-600"></i>
|
||||
</div>
|
||||
<p class="text-600 line-height-3">
|
||||
Cette fonctionnalité n'est disponible que pour les Super-Administrateurs. Contactez le support
|
||||
avec les détails du transfert : membre concerné, organisation de destination et justification.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- Finances -->
|
||||
<p:tab title="💰 Finances">
|
||||
<div class="p-0">
|
||||
<div class="mb-4">
|
||||
<h6 class="text-900 font-semibold mb-3 p-3 surface-100 border-round">
|
||||
<i class="pi pi-dollar mr-2"></i>Cotisations et Paiements
|
||||
</h6>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between cursor-pointer">
|
||||
<h6 class="text-900 font-semibold mb-2">Comment configurer les cotisations automatiques ?</h6>
|
||||
<i class="pi pi-angle-down text-600"></i>
|
||||
</div>
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Allez dans "Gestion Financière" → "Cotisations" → "Configuration Auto". Définissez le montant,
|
||||
la périodicité (mensuelle/annuelle) et les conditions de prélèvement automatique.
|
||||
</p>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<p:commandButton value="Guide Configuration"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-cog" />
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<p:commandButton value="Tester la Config"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-play" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3">
|
||||
<div class="flex align-items-center justify-content-between cursor-pointer">
|
||||
<h6 class="text-900 font-semibold mb-2">Un paiement mobile money a échoué, que faire ?</h6>
|
||||
<i class="pi pi-angle-down text-600"></i>
|
||||
</div>
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Vérifiez d'abord le statut dans "Historique Paiements". Si le paiement est marqué "Échec",
|
||||
cliquez sur "Relancer" ou demandez au membre de réessayer avec un solde suffisant.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- Support Technique -->
|
||||
<p:tab title="🔧 Support Technique">
|
||||
<div class="p-0">
|
||||
<div class="mb-4">
|
||||
<h6 class="text-900 font-semibold mb-3 p-3 surface-100 border-round">
|
||||
<i class="pi pi-wrench mr-2"></i>Problèmes Courants
|
||||
</h6>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between cursor-pointer">
|
||||
<h6 class="text-900 font-semibold mb-2">L'application est lente ou ne répond pas ?</h6>
|
||||
<i class="pi pi-angle-down text-600"></i>
|
||||
</div>
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
1. Vérifiez votre connexion internet<br/>
|
||||
2. Videz le cache : Ctrl+Maj+Suppr (Chrome)<br/>
|
||||
3. Redémarrez votre navigateur<br/>
|
||||
4. Essayez en navigation privée
|
||||
</p>
|
||||
<div class="surface-green-50 border-left-3 border-green-500 p-3">
|
||||
<h6 class="text-green-800 font-semibold mb-2">
|
||||
<i class="pi pi-check-circle mr-2"></i>Solution Rapide
|
||||
</h6>
|
||||
<p class="text-green-700 text-sm mb-0">
|
||||
90% des problèmes de lenteur sont résolus en vidant le cache navigateur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3">
|
||||
<div class="flex align-items-center justify-content-between cursor-pointer">
|
||||
<h6 class="text-900 font-semibold mb-2">Erreur "Page non trouvée" en naviguant ?</h6>
|
||||
<i class="pi pi-angle-down text-600"></i>
|
||||
</div>
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Cette erreur peut survenir après une mise à jour. Déconnectez-vous complètement,
|
||||
fermez tous les onglets UnionFlow, puis reconnectez-vous.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:tab>
|
||||
</p:tabView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Nouvelle Question -->
|
||||
<p:dialog id="questionDialog"
|
||||
widgetVar="questionDialog"
|
||||
header="Poser une Nouvelle Question"
|
||||
modal="true"
|
||||
width="700"
|
||||
styleClass="surface-0">
|
||||
<h:form id="questionForm">
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="categorieQuestion" class="block text-900 font-semibold mb-2">Catégorie *</label>
|
||||
<p:selectOneMenu id="categorieQuestion" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionnez une catégorie" itemValue="" />
|
||||
<f:selectItem itemLabel="Compte et Connexion" itemValue="compte" />
|
||||
<f:selectItem itemLabel="Gestion des Membres" itemValue="membres" />
|
||||
<f:selectItem itemLabel="Finances" itemValue="finances" />
|
||||
<f:selectItem itemLabel="Événements" itemValue="evenements" />
|
||||
<f:selectItem itemLabel="Support Technique" itemValue="technique" />
|
||||
<f:selectItem itemLabel="Autre" itemValue="autre" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="prioriteQuestion" class="block text-900 font-semibold mb-2">Priorité</label>
|
||||
<p:selectOneMenu id="prioriteQuestion" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Normale" itemValue="normale" />
|
||||
<f:selectItem itemLabel="Haute" itemValue="haute" />
|
||||
<f:selectItem itemLabel="Urgente" itemValue="urgente" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="titreQuestion" class="block text-900 font-semibold mb-2">Titre de votre question *</label>
|
||||
<p:inputText id="titreQuestion"
|
||||
placeholder="Résumez votre question en une phrase"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="detailQuestion" class="block text-900 font-semibold mb-2">Description détaillée *</label>
|
||||
<p:inputTextarea id="detailQuestion"
|
||||
rows="6"
|
||||
placeholder="Décrivez votre problème ou question en détail..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('questionDialog').hide()"
|
||||
type="button" />
|
||||
<p:commandButton value="Envoyer la Question"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-send" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
435
target/classes/META-INF/resources/pages/secure/aide/guide.xhtml
Normal file
435
target/classes/META-INF/resources/pages/secure/aide/guide.xhtml
Normal file
@@ -0,0 +1,435 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
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">
|
||||
|
||||
<ui:param name="page" value="#{demandesAideBean}"/>
|
||||
<ui:define name="title">Historique des Demandes d'Aide - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- Redirection vers history.xhtml (WOU/DRY - réutiliser la même page) -->
|
||||
<h:form>
|
||||
<p:commandButton value="Voir l'historique"
|
||||
action="#{demandesAideBean.voirHistorique()}"
|
||||
styleClass="ui-button-primary"/>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,132 @@
|
||||
<!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">Historique des Demandes d'Aide - UnionFlow</ui:define>
|
||||
<ui:define name="content">
|
||||
<h:form id="formHistory">
|
||||
<p:messages id="messages" showDetail="true" closable="true"/>
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="card mb-3">
|
||||
<div class="flex justify-content-between align-items-center flex-column md:flex-row">
|
||||
<div>
|
||||
<h3 class="m-0">
|
||||
<i class="pi pi-history text-primary mr-2"></i>
|
||||
Historique des Demandes d'Aide
|
||||
</h3>
|
||||
<p class="text-600 m-0 mt-2">
|
||||
Consultez l'historique complet de toutes les demandes d'aide
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtres -->
|
||||
<div class="card mb-3">
|
||||
<h5 class="mb-3">Filtres</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<p:outputLabel for="statutFilter" value="Statut"/>
|
||||
<p:selectOneMenu id="statutFilter" value="#{demandesAideBean.filtres.statut}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous" itemValue=""/>
|
||||
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE"/>
|
||||
<f:selectItem itemLabel="Approuvée" itemValue="APPROUVEE"/>
|
||||
<f:selectItem itemLabel="Rejetée" itemValue="REJETEE"/>
|
||||
<p:ajax event="change" update="dtHistory"/>
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<p:outputLabel for="typeFilter" value="Type"/>
|
||||
<p:selectOneMenu id="typeFilter" value="#{demandesAideBean.filtres.type}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous" itemValue=""/>
|
||||
<f:selectItem itemLabel="Médicale" itemValue="AIDE_MEDICALE"/>
|
||||
<f:selectItem itemLabel="Alimentaire" itemValue="AIDE_ALIMENTAIRE"/>
|
||||
<f:selectItem itemLabel="Éducative" itemValue="AIDE_EDUCATIVE"/>
|
||||
<p:ajax event="change" update="dtHistory"/>
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<p:outputLabel for="dateDebut" value="Date début"/>
|
||||
<p:calendar id="dateDebut" value="#{demandesAideBean.filtres.dateDebut}"
|
||||
styleClass="w-full" pattern="dd/MM/yyyy">
|
||||
<p:ajax event="dateSelect" update="dtHistory"/>
|
||||
</p:calendar>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<p:outputLabel for="dateFin" value="Date fin"/>
|
||||
<p:calendar id="dateFin" value="#{demandesAideBean.filtres.dateFin}"
|
||||
styleClass="w-full" pattern="dd/MM/yyyy">
|
||||
<p:ajax event="dateSelect" update="dtHistory"/>
|
||||
</p:calendar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<p:commandButton value="Rechercher"
|
||||
icon="pi pi-search"
|
||||
styleClass="ui-button-primary"
|
||||
action="#{demandesAideBean.rechercher}"
|
||||
update="dtHistory"/>
|
||||
<p:commandButton value="Réinitialiser"
|
||||
icon="pi pi-refresh"
|
||||
styleClass="ui-button-outlined ui-button-secondary"
|
||||
action="#{demandesAideBean.reinitialiserFiltres}"
|
||||
update="@form"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liste -->
|
||||
<div class="card">
|
||||
<h5 class="mb-3">Historique Complet</h5>
|
||||
|
||||
<p:dataTable id="dtHistory"
|
||||
var="demande"
|
||||
value="#{demandesAideBean.demandesFiltrees}"
|
||||
paginator="true"
|
||||
rows="10"
|
||||
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
|
||||
rowsPerPageTemplate="5,10,25"
|
||||
currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords}">
|
||||
|
||||
<p:column headerText="Demandeur" sortBy="#{demande.demandeur}">
|
||||
<div>
|
||||
<div class="font-medium">#{demande.demandeur}</div>
|
||||
<small class="text-600">#{demande.localisation}</small>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{demande.type}">
|
||||
<p:tag value="#{demande.typeLibelle}" severity="#{demande.typeSeverity}" icon="pi #{demande.typeIcon}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant" sortBy="#{demande.montantDemande}">
|
||||
<div class="font-bold text-green-500">#{demande.montantDemande} FCFA</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{demande.statut}">
|
||||
<p:tag value="#{demande.statutLibelle}"
|
||||
severity="#{demande.statutSeverity}"
|
||||
icon="pi #{demande.statutIcon}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date" sortBy="#{demande.dateDemande}">
|
||||
<h:outputText value="#{demande.dateDemande}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
||||
</h:outputText>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:150px">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-info"
|
||||
action="#{demandesAideBean.voirDetails(demande)}"
|
||||
title="Voir détails"/>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,401 @@
|
||||
<!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">Nouveautés - 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-sparkles text-purple-500 mr-3"></i>
|
||||
Nouveautés UnionFlow
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Découvrez les dernières fonctionnalités, améliorations et corrections
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="S'abonner aux Notifications"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-bell" />
|
||||
<p:commandButton value="Historique Complet"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-history" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques des versions -->
|
||||
<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-blue-500 mb-2">v2.1.3</div>
|
||||
<div class="text-900 font-semibold mb-1">Version Actuelle</div>
|
||||
<div class="text-600 text-sm">Stable</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">47</div>
|
||||
<div class="text-900 font-semibold mb-1">Nouvelles Fonctionnalités</div>
|
||||
<div class="text-600 text-sm">Cette année</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-orange-500 mb-2">134</div>
|
||||
<div class="text-900 font-semibold mb-1">Améliorations</div>
|
||||
<div class="text-600 text-sm">Depuis v2.0</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-red-500 mb-2">89</div>
|
||||
<div class="text-900 font-semibold mb-1">Corrections</div>
|
||||
<div class="text-600 text-sm">Bugs résolus</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtres -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h:form id="filtresForm">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="typeChangement" class="block text-900 font-semibold mb-2">Type de changement</label>
|
||||
<p:selectOneMenu id="typeChangement" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les changements" itemValue="" />
|
||||
<f:selectItem itemLabel="Nouvelles fonctionnalités" itemValue="feature" />
|
||||
<f:selectItem itemLabel="Améliorations" itemValue="enhancement" />
|
||||
<f:selectItem itemLabel="Corrections de bugs" itemValue="bugfix" />
|
||||
<f:selectItem itemLabel="Sécurité" itemValue="security" />
|
||||
<f:selectItem itemLabel="Performance" itemValue="performance" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="versionFilter" class="block text-900 font-semibold mb-2">Version</label>
|
||||
<p:selectOneMenu id="versionFilter" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les versions" itemValue="" />
|
||||
<f:selectItem itemLabel="v2.1.x" itemValue="2.1" />
|
||||
<f:selectItem itemLabel="v2.0.x" itemValue="2.0" />
|
||||
<f:selectItem itemLabel="v1.9.x" itemValue="1.9" />
|
||||
<f:selectItem itemLabel="v1.8.x" itemValue="1.8" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="periodeFilter" class="block text-900 font-semibold mb-2">Période</label>
|
||||
<p:selectOneMenu id="periodeFilter" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les périodes" itemValue="" />
|
||||
<f:selectItem itemLabel="Ce mois-ci" itemValue="mois" />
|
||||
<f:selectItem itemLabel="3 derniers mois" itemValue="trimestre" />
|
||||
<f:selectItem itemLabel="Cette année" itemValue="annee" />
|
||||
<f:selectItem itemLabel="Année dernière" itemValue="annee_precedente" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="rechercheNouveautes" class="block text-900 font-semibold mb-2">Rechercher</label>
|
||||
<p:inputText id="rechercheNouveautes"
|
||||
placeholder="Fonctionnalité, mot-clé..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version actuelle highlight -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4 border-2 border-primary">
|
||||
<div class="flex align-items-center gap-3 mb-4">
|
||||
<div class="w-4rem h-4rem border-circle bg-primary flex align-items-center justify-content-center">
|
||||
<i class="pi pi-star text-white text-2xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-primary font-bold text-2xl mb-1">Version 2.1.3 - Dernière version stable</h4>
|
||||
<p class="text-600 mb-0">Publiée le 18 janvier 2024 • Mise à jour de sécurité importante</p>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<p:tag value="ACTUELLE" severity="success" styleClass="text-lg p-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-8">
|
||||
<h6 class="text-900 font-semibold mb-3">🔒 Améliorations de Sécurité</h6>
|
||||
<ul class="list-none p-0 m-0 mb-4">
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700">Correction de faille XSS dans les formulaires de commentaires</span>
|
||||
</li>
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700">Mise à jour des dépendances de sécurité critiques</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700">Renforcement de la validation des uploads de fichiers</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h6 class="text-900 font-semibold mb-3">🐛 Corrections de Bugs</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-check-circle text-blue-500 mr-2 mt-1"></i>
|
||||
<span class="text-700">Résolution du problème d'export Excel sur Chrome 120+</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-check-circle text-blue-500 mr-2 mt-1"></i>
|
||||
<span class="text-700">Correction de l'affichage des dates sur mobile</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-3">
|
||||
<h6 class="text-900 font-semibold mb-3">📊 Impact de la mise à jour</h6>
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-600 text-sm">Sécurité</span>
|
||||
<p:tag value="CRITIQUE" severity="danger" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-600 text-sm">Compatibilité</span>
|
||||
<p:tag value="100%" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span class="text-600 text-sm">Taille</span>
|
||||
<span class="text-600 text-sm">15.2 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Historique des versions -->
|
||||
<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-history mr-2"></i>
|
||||
Historique des Versions
|
||||
</h4>
|
||||
|
||||
<!-- Version 2.1.2 -->
|
||||
<div class="surface-100 border-round p-4 mb-4">
|
||||
<div class="flex align-items-center gap-3 mb-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-blue-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-code text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h5 class="text-900 font-bold mb-1">Version 2.1.2</h5>
|
||||
<p class="text-600 text-sm mb-0">Publiée le 3 janvier 2024</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:tag value="STABLE" severity="success" styleClass="text-xs" />
|
||||
<p:tag value="MAJEURE" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<h6 class="text-blue-600 font-semibold mb-2">✨ Nouvelles Fonctionnalités</h6>
|
||||
<ul class="list-none p-0 m-0 mb-3">
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-plus-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Système de notifications en temps réel</span>
|
||||
</li>
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-plus-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Export PDF avec signature électronique</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-plus-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Interface de gestion des rôles avancée</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<h6 class="text-orange-600 font-semibold mb-2">⚡ Améliorations</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-arrow-up text-orange-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Performance des rapports (+40%)</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-arrow-up text-orange-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Interface mobile optimisée</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version 2.1.1 -->
|
||||
<div class="surface-100 border-round p-4 mb-4">
|
||||
<div class="flex align-items-center gap-3 mb-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-green-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-wrench text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h5 class="text-900 font-bold mb-1">Version 2.1.1</h5>
|
||||
<p class="text-600 text-sm mb-0">Publiée le 15 décembre 2023</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:tag value="MAINTENANCE" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h6 class="text-red-600 font-semibold mb-2">🐛 Corrections</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-times-circle text-red-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Correction du bug d'affichage dans les tableaux de données</span>
|
||||
</li>
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-times-circle text-red-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Résolution des problèmes de connexion SSO</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-times-circle text-red-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Correction des erreurs de validation de formulaires</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Version 2.1.0 -->
|
||||
<div class="surface-100 border-round p-4 mb-4">
|
||||
<div class="flex align-items-center gap-3 mb-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-purple-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-star text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h5 class="text-900 font-bold mb-1">Version 2.1.0 - Release Majeure</h5>
|
||||
<p class="text-600 text-sm mb-0">Publiée le 1er décembre 2023</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:tag value="MAJEURE" severity="success" styleClass="text-xs" />
|
||||
<p:tag value="LTS" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-3 mb-3">
|
||||
<h6 class="text-blue-800 font-semibold mb-2">
|
||||
<i class="pi pi-info-circle mr-2"></i>Points forts de cette version
|
||||
</h6>
|
||||
<p class="text-blue-700 text-sm mb-0">
|
||||
Version LTS avec support étendu jusqu'en décembre 2025.
|
||||
Architecture modernisée et nouvelles API REST.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<h6 class="text-blue-600 font-semibold mb-2">✨ Nouvelles Fonctionnalités</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-start mb-1">
|
||||
<i class="pi pi-plus-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">API REST v2 complète</span>
|
||||
</li>
|
||||
<li class="flex align-items-start mb-1">
|
||||
<i class="pi pi-plus-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Workflow personnalisables</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-plus-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Tableau de bord configurable</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<h6 class="text-orange-600 font-semibold mb-2">⚡ Améliorations</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-start mb-1">
|
||||
<i class="pi pi-arrow-up text-orange-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Performances globales +60%</span>
|
||||
</li>
|
||||
<li class="flex align-items-start mb-1">
|
||||
<i class="pi pi-arrow-up text-orange-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Sécurité renforcée (2FA)</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-arrow-up text-orange-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">UX/UI redesignée</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<h6 class="text-purple-600 font-semibold mb-2">🔧 Technique</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-start mb-1">
|
||||
<i class="pi pi-cog text-purple-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Migration Quarkus 3.x</span>
|
||||
</li>
|
||||
<li class="flex align-items-start mb-1">
|
||||
<i class="pi pi-cog text-purple-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Base de données optimisée</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-cog text-purple-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Cache distribué Redis</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version 2.0.5 -->
|
||||
<div class="surface-100 border-round p-4 opacity-70">
|
||||
<div class="flex align-items-center gap-3 mb-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-gray-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-history text-gray-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h5 class="text-900 font-bold mb-1">Version 2.0.5</h5>
|
||||
<p class="text-600 text-sm mb-0">Publiée le 10 novembre 2023 • Support terminé</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:tag value="EOL" severity="danger" styleClass="text-xs" />
|
||||
<p:tag value="ARCHIVÉE" severity="secondary" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-0">
|
||||
Dernière version de la branche 2.0.x. Migration vers 2.1.x recommandée pour les corrections de sécurité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pagination ou Load More -->
|
||||
<div class="text-center mt-4">
|
||||
<p:commandButton value="Charger Plus de Versions"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-angle-down" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!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">Mes Demandes d'Aide - UnionFlow</ui:define>
|
||||
<ui:define name="content">
|
||||
<h:form id="formRequests">
|
||||
<p:messages id="messages" showDetail="true" closable="true"/>
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="card mb-3">
|
||||
<div class="flex justify-content-between align-items-center flex-column md:flex-row">
|
||||
<div>
|
||||
<h3 class="m-0">
|
||||
<i class="pi pi-list text-primary mr-2"></i>
|
||||
Mes Demandes d'Aide
|
||||
</h3>
|
||||
<p class="text-600 m-0 mt-2">
|
||||
Consultez l'état de vos demandes d'aide
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-2 md:mt-0">
|
||||
<ui:include src="/templates/components/buttons/button-success.xhtml">
|
||||
<ui:param name="value" value="Nouvelle demande"/>
|
||||
<ui:param name="icon" value="pi pi-plus"/>
|
||||
<ui:param name="outcome" value="aideDemandePage"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liste des demandes -->
|
||||
<div class="card">
|
||||
<h5 class="mb-3">Historique de mes Demandes</h5>
|
||||
|
||||
<p:dataTable id="dtDemandes"
|
||||
var="demande"
|
||||
value="#{demandesAideBean.demandesFiltrees}"
|
||||
paginator="true"
|
||||
rows="10"
|
||||
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
|
||||
rowsPerPageTemplate="5,10,25"
|
||||
currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords}">
|
||||
|
||||
<p:column headerText="Type" sortBy="#{demande.type}">
|
||||
<p:tag value="#{demande.typeLibelle}" severity="#{demande.typeSeverity}" icon="pi #{demande.typeIcon}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant" sortBy="#{demande.montantDemande}">
|
||||
<div class="font-bold text-green-500">#{demande.montantDemande} FCFA</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{demande.statut}">
|
||||
<p:tag value="#{demande.statutLibelle}"
|
||||
severity="#{demande.statutSeverity}"
|
||||
icon="pi #{demande.statutIcon}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date" sortBy="#{demande.dateDemande}">
|
||||
<h:outputText value="#{demande.dateDemande}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
||||
</h:outputText>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:150px">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-info"
|
||||
action="#{demandesAideBean.voirDetails(demande)}"
|
||||
title="Voir détails"/>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
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">
|
||||
|
||||
<ui:param name="page" value="#{demandesAideBean}"/>
|
||||
<ui:define name="title">Statistiques des Demandes d'Aide - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<h:form id="formStatistiques">
|
||||
<p:messages id="messages" showDetail="true" closable="true"/>
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="card mb-3">
|
||||
<div class="flex justify-content-between align-items-center flex-column md:flex-row">
|
||||
<div>
|
||||
<h3 class="m-0">
|
||||
<i class="pi pi-chart-bar text-primary mr-2"></i>
|
||||
Statistiques des Demandes d'Aide
|
||||
</h3>
|
||||
<p class="text-600 m-0 mt-2">
|
||||
Analyse et statistiques détaillées des demandes d'aide
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-2 md:mt-0">
|
||||
<p:commandButton value="Actualiser"
|
||||
icon="pi pi-refresh"
|
||||
styleClass="ui-button-outlined ui-button-secondary"
|
||||
action="#{demandesAideBean.actualiser}"
|
||||
update="@form"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques principales -->
|
||||
<div class="grid mb-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-blue-100 border-left-3 border-blue-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-blue-900 font-bold text-2xl">#{demandesAideBean.statistiques.totalDemandes}</div>
|
||||
<div class="text-blue-700">Total Demandes</div>
|
||||
</div>
|
||||
<div class="bg-blue-500 text-white border-round text-center"
|
||||
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
||||
<i class="pi pi-inbox text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-orange-100 border-left-3 border-orange-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-orange-900 font-bold text-2xl">#{demandesAideBean.statistiques.demandesEnAttente}</div>
|
||||
<div class="text-orange-700">En Attente</div>
|
||||
</div>
|
||||
<div class="bg-orange-500 text-white border-round text-center"
|
||||
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
||||
<i class="pi pi-clock text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-green-100 border-left-3 border-green-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-green-900 font-bold text-2xl">#{demandesAideBean.statistiques.demandesApprouvees}</div>
|
||||
<div class="text-green-700">Approuvées</div>
|
||||
</div>
|
||||
<div class="bg-green-500 text-white border-round text-center"
|
||||
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
||||
<i class="pi pi-check text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-purple-100 border-left-3 border-purple-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-purple-900 font-bold text-2xl">#{demandesAideBean.statistiques.montantTotalAide}</div>
|
||||
<div class="text-purple-700">Montant Total</div>
|
||||
</div>
|
||||
<div class="bg-purple-500 text-white border-round text-center"
|
||||
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
||||
<i class="pi pi-dollar text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Répartition par type -->
|
||||
<div class="card">
|
||||
<h5 class="mb-3">Répartition par Type d'Aide</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-chart-pie text-6xl text-blue-500 mb-3"></i>
|
||||
<p class="text-600">Graphique de répartition par type</p>
|
||||
<small class="text-500">À implémenter avec PrimeNG Charts</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-chart-bar text-6xl text-green-500 mb-3"></i>
|
||||
<p class="text-600">Graphique de répartition par statut</p>
|
||||
<small class="text-500">À implémenter avec PrimeNG Charts</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,463 @@
|
||||
<!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">Suggestions et Feedback - 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-lightbulb text-yellow-500 mr-3"></i>
|
||||
Suggestions et Feedback
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Partagez vos idées pour améliorer UnionFlow et votez pour les suggestions de la communauté
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Nouvelle Suggestion"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-plus"
|
||||
onclick="PF('nouvelleSuggestionDialog').show()" />
|
||||
<p:commandButton value="Mes Suggestions"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-user" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques communauté -->
|
||||
<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-blue-500 mb-2">247</div>
|
||||
<div class="text-900 font-semibold mb-1">Suggestions</div>
|
||||
<div class="text-600 text-sm">Soumises</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">43</div>
|
||||
<div class="text-900 font-semibold mb-1">Implémentées</div>
|
||||
<div class="text-600 text-sm">Dans la v2.0</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">1,523</div>
|
||||
<div class="text-900 font-semibold mb-1">Votes</div>
|
||||
<div class="text-600 text-sm">Ce mois-ci</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-orange-500 mb-2">156</div>
|
||||
<div class="text-900 font-semibold mb-1">Contributeurs</div>
|
||||
<div class="text-600 text-sm">Actifs</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtres et tri -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h:form id="filtresForm">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="statutSuggestion" class="block text-900 font-semibold mb-2">Statut</label>
|
||||
<p:selectOneMenu id="statutSuggestion" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
||||
<f:selectItem itemLabel="Nouvelle" itemValue="nouvelle" />
|
||||
<f:selectItem itemLabel="En cours d'évaluation" itemValue="evaluation" />
|
||||
<f:selectItem itemLabel="Approuvée" itemValue="approuvee" />
|
||||
<f:selectItem itemLabel="En développement" itemValue="developpement" />
|
||||
<f:selectItem itemLabel="Implémentée" itemValue="implementee" />
|
||||
<f:selectItem itemLabel="Rejetée" itemValue="rejetee" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="categorieSuggestion" class="block text-900 font-semibold mb-2">Catégorie</label>
|
||||
<p:selectOneMenu id="categorieSuggestion" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les catégories" itemValue="" />
|
||||
<f:selectItem itemLabel="Interface Utilisateur" itemValue="ui" />
|
||||
<f:selectItem itemLabel="Fonctionnalité" itemValue="feature" />
|
||||
<f:selectItem itemLabel="Performance" itemValue="performance" />
|
||||
<f:selectItem itemLabel="Sécurité" itemValue="securite" />
|
||||
<f:selectItem itemLabel="Intégration" itemValue="integration" />
|
||||
<f:selectItem itemLabel="Mobile" itemValue="mobile" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="triSuggestion" class="block text-900 font-semibold mb-2">Trier par</label>
|
||||
<p:selectOneMenu id="triSuggestion" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Plus récentes" itemValue="date_desc" />
|
||||
<f:selectItem itemLabel="Plus anciennes" itemValue="date_asc" />
|
||||
<f:selectItem itemLabel="Plus votées" itemValue="votes_desc" />
|
||||
<f:selectItem itemLabel="Moins votées" itemValue="votes_asc" />
|
||||
<f:selectItem itemLabel="Statut" itemValue="statut" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="rechercheSuggestion" class="block text-900 font-semibold mb-2">Rechercher</label>
|
||||
<p:inputText id="rechercheSuggestion"
|
||||
placeholder="Mots-clés..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Suggestions populaires -->
|
||||
<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-star-fill text-yellow-500 mr-2"></i>
|
||||
Suggestions les Plus Populaires
|
||||
</h4>
|
||||
|
||||
<!-- Suggestion 1 - Très populaire -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-start justify-content-between mb-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-semibold mb-0">Mode sombre pour l'interface</h6>
|
||||
<p:tag value="EN DÉVELOPPEMENT" severity="info" styleClass="text-xs" />
|
||||
<p:tag value="INTERFACE" severity="help" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">Proposé par Marie Dubois • il y a 2 semaines</p>
|
||||
<p class="text-700 line-height-3 mb-3">
|
||||
Ajouter un thème sombre à l'interface pour réduire la fatigue visuelle lors de longues sessions de travail.
|
||||
Particulièrement utile pour les utilisateurs travaillant en soirée ou dans des environnements peu éclairés.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">
|
||||
<i class="pi pi-comments mr-1"></i>24 commentaires
|
||||
</span>
|
||||
<span class="text-600 text-sm">
|
||||
<i class="pi pi-eye mr-1"></i>847 vues
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center ml-4">
|
||||
<div class="surface-blue-100 border-round p-3 cursor-pointer hover:surface-blue-200 transition-duration-200">
|
||||
<i class="pi pi-thumbs-up text-blue-600 text-xl mb-1"></i>
|
||||
<div class="text-blue-600 font-bold text-lg">156</div>
|
||||
<div class="text-blue-600 text-xs">votes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-3">
|
||||
<p class="text-blue-700 text-sm mb-0">
|
||||
<i class="pi pi-info-circle mr-2"></i>
|
||||
<strong>Mise à jour:</strong> Cette fonctionnalité est en cours de développement et sera disponible dans la version 2.2.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Suggestion 2 - Populaire -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-start justify-content-between mb-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-semibold mb-0">Export PDF personnalisé avec logo</h6>
|
||||
<p:tag value="APPROUVÉE" severity="success" styleClass="text-xs" />
|
||||
<p:tag value="FONCTIONNALITÉ" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">Proposé par Thomas Martin • il y a 1 mois</p>
|
||||
<p class="text-700 line-height-3 mb-3">
|
||||
Permettre l'ajout du logo de l'organisation sur tous les exports PDF (rapports, listes membres, etc.)
|
||||
pour une meilleure présentation des documents officiels.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">
|
||||
<i class="pi pi-comments mr-1"></i>18 commentaires
|
||||
</span>
|
||||
<span class="text-600 text-sm">
|
||||
<i class="pi pi-eye mr-1"></i>523 vues
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center ml-4">
|
||||
<div class="surface-green-100 border-round p-3 cursor-pointer hover:surface-green-200 transition-duration-200">
|
||||
<i class="pi pi-thumbs-up text-green-600 text-xl mb-1"></i>
|
||||
<div class="text-green-600 font-bold text-lg">98</div>
|
||||
<div class="text-green-600 text-xs">votes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Suggestion 3 - Récente -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-start justify-content-between mb-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-semibold mb-0">Notifications push mobiles</h6>
|
||||
<p:tag value="NOUVELLE" severity="secondary" styleClass="text-xs" />
|
||||
<p:tag value="MOBILE" severity="info" styleClass="text-xs" />
|
||||
<p:tag value="NOUVEAU" severity="danger" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">Proposé par Sophie Leroy • il y a 3 jours</p>
|
||||
<p class="text-700 line-height-3 mb-3">
|
||||
Recevoir des notifications push sur mobile pour les événements importants :
|
||||
nouvelles adhésions, rappels de cotisations, événements à venir, etc.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">
|
||||
<i class="pi pi-comments mr-1"></i>7 commentaires
|
||||
</span>
|
||||
<span class="text-600 text-sm">
|
||||
<i class="pi pi-eye mr-1"></i>156 vues
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center ml-4">
|
||||
<div class="surface-purple-100 border-round p-3 cursor-pointer hover:surface-purple-200 transition-duration-200">
|
||||
<i class="pi pi-thumbs-up text-purple-600 text-xl mb-1"></i>
|
||||
<div class="text-purple-600 font-bold text-lg">34</div>
|
||||
<div class="text-purple-600 text-xs">votes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mes contributions -->
|
||||
<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-user mr-2"></i>
|
||||
Mes Contributions
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Ma suggestion 1 -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h6 class="text-900 font-semibold mb-0">Import CSV automatisé</h6>
|
||||
<p:tag value="EN ÉVALUATION" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">Soumise il y a 1 semaine</p>
|
||||
<p class="text-700 text-sm mb-3">
|
||||
Permettre l'import automatique de fichiers CSV pour les inscriptions en masse...
|
||||
</p>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-thumbs-up text-blue-500"></i>
|
||||
<span class="text-600 text-sm">12 votes</span>
|
||||
</div>
|
||||
<p:commandButton value="Modifier"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-pencil" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ma suggestion 2 -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h6 class="text-900 font-semibold mb-0">Calendrier partagé équipe</h6>
|
||||
<p:tag value="IMPLÉMENTÉE" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">Soumise il y a 3 mois</p>
|
||||
<p class="text-700 text-sm mb-3">
|
||||
Calendrier collaboratif pour planifier les événements et réunions...
|
||||
</p>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-thumbs-up text-green-500"></i>
|
||||
<span class="text-600 text-sm">67 votes</span>
|
||||
</div>
|
||||
<p:commandButton value="Voir Implémentation"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-external-link" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roadmap des suggestions -->
|
||||
<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-map mr-2"></i>
|
||||
Roadmap des Suggestions
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-blue-600 font-semibold mb-3">
|
||||
<i class="pi pi-calendar mr-2"></i>Version 2.2 (Q2 2024)
|
||||
</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center mb-2">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">Mode sombre</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-2">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">Export PDF avec logo</span>
|
||||
</li>
|
||||
<li class="flex align-items-center">
|
||||
<i class="pi pi-clock text-orange-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">Recherche avancée globale</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-purple-600 font-semibold mb-3">
|
||||
<i class="pi pi-calendar mr-2"></i>Version 2.3 (Q3 2024)
|
||||
</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center mb-2">
|
||||
<i class="pi pi-clock text-orange-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">Notifications push mobiles</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-2">
|
||||
<i class="pi pi-clock text-orange-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">API REST publique</span>
|
||||
</li>
|
||||
<li class="flex align-items-center">
|
||||
<i class="pi pi-clock text-orange-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">Tableau de bord personnalisable</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4 h-full">
|
||||
<h6 class="text-orange-600 font-semibold mb-3">
|
||||
<i class="pi pi-calendar mr-2"></i>Version 3.0 (Q4 2024)
|
||||
</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center mb-2">
|
||||
<i class="pi pi-circle text-300 mr-2"></i>
|
||||
<span class="text-700 text-sm">Application mobile native</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-2">
|
||||
<i class="pi pi-circle text-300 mr-2"></i>
|
||||
<span class="text-700 text-sm">Intelligence artificielle</span>
|
||||
</li>
|
||||
<li class="flex align-items-center">
|
||||
<i class="pi pi-circle text-300 mr-2"></i>
|
||||
<span class="text-700 text-sm">Intégrations avancées</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Nouvelle Suggestion -->
|
||||
<p:dialog id="nouvelleSuggestionDialog"
|
||||
widgetVar="nouvelleSuggestionDialog"
|
||||
header="Soumettre une Nouvelle Suggestion"
|
||||
modal="true"
|
||||
width="800"
|
||||
styleClass="surface-0">
|
||||
<h:form id="nouvelleSuggestionForm">
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="categorieSugg" class="block text-900 font-semibold mb-2">Catégorie *</label>
|
||||
<p:selectOneMenu id="categorieSugg" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionnez une catégorie" itemValue="" />
|
||||
<f:selectItem itemLabel="Interface Utilisateur" itemValue="ui" />
|
||||
<f:selectItem itemLabel="Nouvelle Fonctionnalité" itemValue="feature" />
|
||||
<f:selectItem itemLabel="Amélioration Performance" itemValue="performance" />
|
||||
<f:selectItem itemLabel="Sécurité" itemValue="securite" />
|
||||
<f:selectItem itemLabel="Intégration Externe" itemValue="integration" />
|
||||
<f:selectItem itemLabel="Application Mobile" itemValue="mobile" />
|
||||
<f:selectItem itemLabel="Rapports et Analytics" itemValue="reporting" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="prioriteSugg" class="block text-900 font-semibold mb-2">Priorité estimée</label>
|
||||
<p:selectOneMenu id="prioriteSugg" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Basse" itemValue="basse" />
|
||||
<f:selectItem itemLabel="Moyenne" itemValue="moyenne" />
|
||||
<f:selectItem itemLabel="Haute" itemValue="haute" />
|
||||
<f:selectItem itemLabel="Critique" itemValue="critique" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="titreSugg" class="block text-900 font-semibold mb-2">Titre de votre suggestion *</label>
|
||||
<p:inputText id="titreSugg"
|
||||
placeholder="Résumez votre idée en une phrase claire"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="descriptionSugg" class="block text-900 font-semibold mb-2">Description détaillée *</label>
|
||||
<p:inputTextarea id="descriptionSugg"
|
||||
rows="6"
|
||||
placeholder="Décrivez votre suggestion : problème rencontré, solution proposée, bénéfices attendus..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="justificationSugg" class="block text-900 font-semibold mb-2">Justification métier</label>
|
||||
<p:inputTextarea id="justificationSugg"
|
||||
rows="3"
|
||||
placeholder="Expliquez pourquoi cette fonctionnalité serait utile et pour quels utilisateurs..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label class="block text-900 font-semibold mb-2">Maquettes ou références (optionnel)</label>
|
||||
<p:fileUpload mode="basic"
|
||||
multiple="true"
|
||||
chooseLabel="Choisir des fichiers"
|
||||
styleClass="w-full" />
|
||||
<small class="text-500">Images, schémas, liens vers des exemples similaires (max 5MB par fichier)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('nouvelleSuggestionDialog').hide()"
|
||||
type="button" />
|
||||
<p:commandButton value="Soumettre la Suggestion"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-send" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,322 @@
|
||||
<!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">Contacter le Support - 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-phone text-green-500 mr-3"></i>
|
||||
Contacter le Support
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Notre équipe support est là pour vous aider
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Nouveau Ticket"
|
||||
styleClass="p-button-success"
|
||||
icon="pi pi-plus"
|
||||
onclick="PF('ticketDialog').show()" />
|
||||
<p:commandButton value="Base de Connaissances"
|
||||
styleClass="p-button-info p-button-outlined"
|
||||
icon="pi pi-book" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informations de contact -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<i class="pi pi-clock text-2xl text-blue-500 mb-2"></i>
|
||||
<div class="text-900 font-semibold mb-1">Temps de Réponse</div>
|
||||
<div class="text-600 text-sm">Moins de 2h</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<i class="pi pi-check-circle text-2xl text-green-500 mb-2"></i>
|
||||
<div class="text-900 font-semibold mb-1">Taux de Résolution</div>
|
||||
<div class="text-600 text-sm">98.5%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<i class="pi pi-users text-2xl text-purple-500 mb-2"></i>
|
||||
<div class="text-900 font-semibold mb-1">Satisfaction Client</div>
|
||||
<div class="text-600 text-sm">4.8/5</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<i class="pi pi-calendar text-2xl text-orange-500 mb-2"></i>
|
||||
<div class="text-900 font-semibold mb-1">Support</div>
|
||||
<div class="text-600 text-sm">7j/7 - 24h/24</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Canaux de support -->
|
||||
<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">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-comment mr-2"></i>
|
||||
Choisissez votre canal de support
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round-lg p-4 cursor-pointer transition-all transition-duration-200 h-full">
|
||||
<div class="text-center">
|
||||
<i class="pi pi-ticket text-4xl text-blue-500 mb-3"></i>
|
||||
<h5 class="text-900 font-bold mb-2">Ticket Support</h5>
|
||||
<p class="text-600 text-sm mb-3">Pour les problèmes techniques et demandes complexes</p>
|
||||
<p:commandButton value="Créer un Ticket"
|
||||
styleClass="p-button-sm w-full"
|
||||
onclick="PF('ticketDialog').show()" />
|
||||
<p class="text-500 text-xs mt-2">Réponse sous 2h</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round-lg p-4 cursor-pointer transition-all transition-duration-200 h-full">
|
||||
<div class="text-center">
|
||||
<i class="pi pi-comments text-4xl text-green-500 mb-3"></i>
|
||||
<h5 class="text-900 font-bold mb-2">Chat en Direct</h5>
|
||||
<p class="text-600 text-sm mb-3">Support instantané pour les questions urgentes</p>
|
||||
<p:commandButton value="Démarrer le Chat"
|
||||
styleClass="p-button-sm w-full p-button-success" />
|
||||
<p class="text-500 text-xs mt-2">Disponible 9h-18h</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round-lg p-4 cursor-pointer transition-all transition-duration-200 h-full">
|
||||
<div class="text-center">
|
||||
<i class="pi pi-phone text-4xl text-orange-500 mb-3"></i>
|
||||
<h5 class="text-900 font-bold mb-2">Support Téléphonique</h5>
|
||||
<p class="text-600 text-sm mb-3">Appelez-nous directement pour une assistance immédiate</p>
|
||||
<div class="text-900 font-bold text-lg mb-2">+33 1 23 45 67 89</div>
|
||||
<p class="text-500 text-xs">Lun-Ven 8h-19h</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ rapide -->
|
||||
<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">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-question-circle mr-2"></i>
|
||||
Questions Fréquentes
|
||||
</h4>
|
||||
|
||||
<p:tabView>
|
||||
<p:tab title="Comment réinitialiser mon mot de passe ?">
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Pour réinitialiser votre mot de passe, cliquez sur "Mot de passe oublié ?"
|
||||
sur la page de connexion. Vous recevrez un email avec un lien de réinitialisation
|
||||
valable pendant 24 heures.
|
||||
</p>
|
||||
<p:commandButton value="Réinitialiser maintenant"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-key" />
|
||||
</p:tab>
|
||||
|
||||
<p:tab title="Comment exporter mes données ?">
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Vous pouvez exporter vos données depuis le menu "Rapports" → "Export Personnalisés".
|
||||
Plusieurs formats sont disponibles : Excel, PDF, CSV et JSON.
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Guide d'Export"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-book" />
|
||||
<p:commandButton value="Accéder aux Exports"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-download" />
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<p:tab title="Problème de performance lente ?">
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Si l'application semble lente, vérifiez votre connexion internet et
|
||||
videz le cache de votre navigateur. Pour Chrome : Ctrl+Maj+Suppr.
|
||||
</p>
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-3">
|
||||
<h6 class="text-blue-800 font-semibold mb-2">
|
||||
<i class="pi pi-info-circle mr-2"></i>Diagnostic automatique
|
||||
</h6>
|
||||
<p class="text-blue-700 text-sm mb-0">
|
||||
Utilisez l'outil de diagnostic intégré pour identifier les problèmes.
|
||||
</p>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<p:tab title="Comment configurer les notifications ?">
|
||||
<p class="text-600 line-height-3 mb-3">
|
||||
Rendez-vous dans "Mon Espace Personnel" → "Mes Préférences" → "Notifications"
|
||||
pour configurer vos alertes par email et dans l'application.
|
||||
</p>
|
||||
</p:tab>
|
||||
</p:tabView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ressources utiles -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-bookmark mr-2"></i>
|
||||
Ressources Utiles
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="flex align-items-center p-3 surface-100 border-round hover:surface-200 cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-video text-2xl text-purple-500 mr-3"></i>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Tutoriels Vidéo</h6>
|
||||
<p class="text-600 text-sm mb-0">Guides visuels étape par étape</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="flex align-items-center p-3 surface-100 border-round hover:surface-200 cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-book text-2xl text-blue-500 mr-3"></i>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Documentation</h6>
|
||||
<p class="text-600 text-sm mb-0">Guide complet d'utilisation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="flex align-items-center p-3 surface-100 border-round hover:surface-200 cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-users text-2xl text-green-500 mr-3"></i>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Communauté</h6>
|
||||
<p class="text-600 text-sm mb-0">Forum d'entraide utilisateurs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="flex align-items-center p-3 surface-100 border-round hover:surface-200 cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-sparkles text-2xl text-orange-500 mr-3"></i>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Nouveautés</h6>
|
||||
<p class="text-600 text-sm mb-0">Dernières fonctionnalités</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Nouveau Ticket -->
|
||||
<p:dialog id="ticketDialog"
|
||||
widgetVar="ticketDialog"
|
||||
header="Créer un Ticket Support"
|
||||
modal="true"
|
||||
width="700"
|
||||
styleClass="surface-0">
|
||||
<h:form id="ticketForm">
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="sujetTicket" class="block text-900 font-semibold mb-2">Sujet *</label>
|
||||
<p:inputText id="sujetTicket"
|
||||
placeholder="Résumé du problème"
|
||||
required="true"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="prioriteTicket" class="block text-900 font-semibold mb-2">Priorité</label>
|
||||
<p:selectOneMenu id="prioriteTicket" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Basse" itemValue="BASSE" />
|
||||
<f:selectItem itemLabel="Normale" itemValue="NORMALE" />
|
||||
<f:selectItem itemLabel="Haute" itemValue="HAUTE" />
|
||||
<f:selectItem itemLabel="Urgente" itemValue="URGENTE" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="categorieTicket" class="block text-900 font-semibold mb-2">Catégorie</label>
|
||||
<p:selectOneMenu id="categorieTicket" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Problème Technique" itemValue="TECHNIQUE" />
|
||||
<f:selectItem itemLabel="Demande de Fonctionnalité" itemValue="FONCTIONNALITE" />
|
||||
<f:selectItem itemLabel="Question d'Utilisation" itemValue="UTILISATION" />
|
||||
<f:selectItem itemLabel="Problème de Compte" itemValue="COMPTE" />
|
||||
<f:selectItem itemLabel="Autre" itemValue="AUTRE" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="environnement" class="block text-900 font-semibold mb-2">Environnement</label>
|
||||
<p:inputText id="environnement"
|
||||
placeholder="Ex: Chrome 120, Windows 11"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="descriptionTicket" class="block text-900 font-semibold mb-2">Description *</label>
|
||||
<p:inputTextarea id="descriptionTicket"
|
||||
rows="5"
|
||||
placeholder="Décrivez votre problème en détail..."
|
||||
required="true"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label class="block text-900 font-semibold mb-2">Pièces Jointes</label>
|
||||
<p:fileUpload mode="basic"
|
||||
multiple="true"
|
||||
chooseLabel="Choisir des fichiers"
|
||||
uploadLabel="Télécharger"
|
||||
cancelLabel="Annuler"
|
||||
styleClass="w-full" />
|
||||
<small class="text-500">Formats acceptés: jpg, png, pdf, doc, xlsx (max 10MB)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('ticketDialog').hide()"
|
||||
type="button" />
|
||||
<p:commandButton value="Créer le Ticket"
|
||||
styleClass="p-button-success"
|
||||
icon="pi pi-send" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,437 @@
|
||||
<!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">Mes Tickets Support - 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-ticket text-purple-500 mr-3"></i>
|
||||
Mes Tickets Support
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Suivez l'état de vos demandes d'assistance et échangez avec notre équipe
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Nouveau Ticket"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-plus"
|
||||
onclick="PF('nouveauTicketDialog').show()" />
|
||||
<p:commandButton value="FAQ"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-question-circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques personnelles -->
|
||||
<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-blue-500 mb-2">12</div>
|
||||
<div class="text-900 font-semibold mb-1">Tickets Créés</div>
|
||||
<div class="text-600 text-sm">Au 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-orange-500 mb-2">3</div>
|
||||
<div class="text-900 font-semibold mb-1">En Attente</div>
|
||||
<div class="text-600 text-sm">Réponse support</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">8</div>
|
||||
<div class="text-900 font-semibold mb-1">Résolus</div>
|
||||
<div class="text-600 text-sm">Avec succè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-red-500 mb-2">1</div>
|
||||
<div class="text-900 font-semibold mb-1">Fermé</div>
|
||||
<div class="text-600 text-sm">Sans résolution</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtres -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h:form id="filtresForm">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="statutFilter" class="block text-900 font-semibold mb-2">Statut</label>
|
||||
<p:selectOneMenu id="statutFilter" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
||||
<f:selectItem itemLabel="Ouvert" itemValue="ouvert" />
|
||||
<f:selectItem itemLabel="En cours" itemValue="en_cours" />
|
||||
<f:selectItem itemLabel="En attente" itemValue="en_attente" />
|
||||
<f:selectItem itemLabel="Résolu" itemValue="resolu" />
|
||||
<f:selectItem itemLabel="Fermé" itemValue="ferme" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="prioriteFilter" class="block text-900 font-semibold mb-2">Priorité</label>
|
||||
<p:selectOneMenu id="prioriteFilter" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les priorités" itemValue="" />
|
||||
<f:selectItem itemLabel="Basse" itemValue="basse" />
|
||||
<f:selectItem itemLabel="Normale" itemValue="normale" />
|
||||
<f:selectItem itemLabel="Haute" itemValue="haute" />
|
||||
<f:selectItem itemLabel="Urgente" itemValue="urgente" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="categorieFilter" class="block text-900 font-semibold mb-2">Catégorie</label>
|
||||
<p:selectOneMenu id="categorieFilter" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les catégories" itemValue="" />
|
||||
<f:selectItem itemLabel="Problème Technique" itemValue="technique" />
|
||||
<f:selectItem itemLabel="Demande de Fonctionnalité" itemValue="fonctionnalite" />
|
||||
<f:selectItem itemLabel="Question d'Utilisation" itemValue="utilisation" />
|
||||
<f:selectItem itemLabel="Problème de Compte" itemValue="compte" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="rechercheTicket" class="block text-900 font-semibold mb-2">Rechercher</label>
|
||||
<p:inputText id="rechercheTicket"
|
||||
placeholder="Numéro, sujet..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liste des tickets -->
|
||||
<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-list mr-2"></i>
|
||||
Historique de vos Tickets
|
||||
</h4>
|
||||
|
||||
<!-- Ticket 1 - En cours -->
|
||||
<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 mb-3">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-orange-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-clock text-orange-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">#TK-2024-0157 - Problème d'export Excel</h6>
|
||||
<div class="flex align-items-center gap-2 mb-1">
|
||||
<p:tag value="EN COURS" severity="warning" styleClass="text-xs" />
|
||||
<p:tag value="HAUTE" severity="danger" styleClass="text-xs" />
|
||||
<p:tag value="TECHNIQUE" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-0">Créé le 15 janvier 2024 • Dernière réponse il y a 2h</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-600 text-sm mb-2">Agent: Marie Dubois</div>
|
||||
<p:commandButton value="Voir Détails"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-eye" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-3">
|
||||
Impossible d'exporter la liste des membres en format Excel. Le fichier généré est corrompu
|
||||
et ne s'ouvre pas dans Excel. Cela concerne tous les exports depuis la version 2.1.
|
||||
</p>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-comments text-blue-500"></i>
|
||||
<span class="text-600 text-sm">5 messages</span>
|
||||
<i class="pi pi-paperclip text-600 ml-3"></i>
|
||||
<span class="text-600 text-sm">2 fichiers</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-clock text-600"></i>
|
||||
<span class="text-600 text-sm">SLA: 4h restantes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ticket 2 - En attente -->
|
||||
<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 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-pause text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">#TK-2024-0143 - Demande de formation personnalisée</h6>
|
||||
<div class="flex align-items-center gap-2 mb-1">
|
||||
<p:tag value="EN ATTENTE" severity="info" styleClass="text-xs" />
|
||||
<p:tag value="NORMALE" severity="success" styleClass="text-xs" />
|
||||
<p:tag value="FONCTIONNALITÉ" severity="help" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-0">Créé le 12 janvier 2024 • En attente de votre réponse</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-600 text-sm mb-2">Agent: Thomas Martin</div>
|
||||
<p:commandButton value="Répondre"
|
||||
styleClass="p-button-primary p-button-sm"
|
||||
icon="pi pi-reply" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-3">
|
||||
Souhaitons organiser une formation sur mesure pour notre équipe administrative.
|
||||
Besoin de devis pour 15 personnes sur 2 jours.
|
||||
</p>
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-3 mb-3">
|
||||
<p class="text-blue-700 text-sm mb-0">
|
||||
<i class="pi pi-info-circle mr-2"></i>
|
||||
<strong>Action requise:</strong> Merci de préciser vos disponibilités pour les dates proposées.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-comments text-blue-500"></i>
|
||||
<span class="text-600 text-sm">3 messages</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-exclamation-triangle text-orange-500"></i>
|
||||
<span class="text-orange-600 text-sm">Réponse attendue depuis 3 jours</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ticket 3 - Résolu -->
|
||||
<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 mb-3">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-green-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-check text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">#TK-2024-0128 - Problème de connexion mobile</h6>
|
||||
<div class="flex align-items-center gap-2 mb-1">
|
||||
<p:tag value="RÉSOLU" severity="success" styleClass="text-xs" />
|
||||
<p:tag value="BASSE" severity="secondary" styleClass="text-xs" />
|
||||
<p:tag value="TECHNIQUE" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-0">Créé le 8 janvier 2024 • Résolu le 10 janvier 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-600 text-sm mb-2">Agent: Sophie Leroy</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Noter"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-star" />
|
||||
<p:commandButton value="Détails"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-eye" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-3">
|
||||
Application ne se charge pas sur smartphone Android. Écran blanc après connexion.
|
||||
</p>
|
||||
<div class="surface-green-50 border-left-3 border-green-500 p-3 mb-3">
|
||||
<p class="text-green-700 text-sm mb-0">
|
||||
<i class="pi pi-check-circle mr-2"></i>
|
||||
<strong>Résolution:</strong> Problème résolu en vidant le cache de l'application mobile.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-comments text-blue-500"></i>
|
||||
<span class="text-600 text-sm">6 messages</span>
|
||||
<i class="pi pi-clock text-600 ml-3"></i>
|
||||
<span class="text-600 text-sm">Résolu en 2 jours</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-400"></i>
|
||||
<span class="text-600 text-sm">Note: 5/5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ticket 4 - Fermé -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200 opacity-70">
|
||||
<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-red-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-times text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">#TK-2024-0095 - Demande modification base</h6>
|
||||
<div class="flex align-items-center gap-2 mb-1">
|
||||
<p:tag value="FERMÉ" severity="danger" styleClass="text-xs" />
|
||||
<p:tag value="HAUTE" severity="danger" styleClass="text-xs" />
|
||||
<p:tag value="FONCTIONNALITÉ" severity="help" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-0">Créé le 28 décembre 2023 • Fermé le 5 janvier 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-600 text-sm mb-2">Agent: Marc Durand</div>
|
||||
<p:commandButton value="Rouvrir"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-replay" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-3">
|
||||
Demande de modification des champs de la base de données membres pour ajouter
|
||||
des informations métier spécifiques.
|
||||
</p>
|
||||
<div class="surface-red-50 border-left-3 border-red-500 p-3 mb-3">
|
||||
<p class="text-red-700 text-sm mb-0">
|
||||
<i class="pi pi-times-circle mr-2"></i>
|
||||
<strong>Fermé:</strong> Demande non compatible avec l'architecture actuelle.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-comments text-blue-500"></i>
|
||||
<span class="text-600 text-sm">8 messages</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-ban text-red-500"></i>
|
||||
<span class="text-red-600 text-sm">Non résolu</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions rapides -->
|
||||
<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-bolt mr-2"></i>
|
||||
Actions Rapides
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<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">
|
||||
<i class="pi pi-plus-circle text-3xl text-primary mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Nouveau Ticket</h6>
|
||||
<p class="text-600 text-sm mb-0">Créer une demande d'assistance</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<i class="pi pi-question-circle text-3xl text-blue-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Consulter la FAQ</h6>
|
||||
<p class="text-600 text-sm mb-0">Réponses aux questions courantes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<i class="pi pi-book text-3xl text-green-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Guide Utilisateur</h6>
|
||||
<p class="text-600 text-sm mb-0">Documentation complète</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<i class="pi pi-phone text-3xl text-orange-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Contact Direct</h6>
|
||||
<p class="text-600 text-sm mb-0">Appelez le support</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Nouveau Ticket -->
|
||||
<p:dialog id="nouveauTicketDialog"
|
||||
widgetVar="nouveauTicketDialog"
|
||||
header="Créer un Nouveau Ticket"
|
||||
modal="true"
|
||||
width="800"
|
||||
styleClass="surface-0">
|
||||
<h:form id="nouveauTicketForm">
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="categorieTicket" class="block text-900 font-semibold mb-2">Catégorie *</label>
|
||||
<p:selectOneMenu id="categorieTicket" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionnez une catégorie" itemValue="" />
|
||||
<f:selectItem itemLabel="Problème Technique" itemValue="technique" />
|
||||
<f:selectItem itemLabel="Demande de Fonctionnalité" itemValue="fonctionnalite" />
|
||||
<f:selectItem itemLabel="Question d'Utilisation" itemValue="utilisation" />
|
||||
<f:selectItem itemLabel="Problème de Compte" itemValue="compte" />
|
||||
<f:selectItem itemLabel="Autre" itemValue="autre" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="prioriteTicket" class="block text-900 font-semibold mb-2">Priorité</label>
|
||||
<p:selectOneMenu id="prioriteTicket" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Basse" itemValue="basse" />
|
||||
<f:selectItem itemLabel="Normale" itemValue="normale" />
|
||||
<f:selectItem itemLabel="Haute" itemValue="haute" />
|
||||
<f:selectItem itemLabel="Urgente" itemValue="urgente" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="sujetTicket" class="block text-900 font-semibold mb-2">Sujet *</label>
|
||||
<p:inputText id="sujetTicket"
|
||||
placeholder="Résumé du problème ou de la demande"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="descriptionTicket" class="block text-900 font-semibold mb-2">Description détaillée *</label>
|
||||
<p:inputTextarea id="descriptionTicket"
|
||||
rows="6"
|
||||
placeholder="Décrivez votre problème en détail, incluez les étapes pour reproduire..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label class="block text-900 font-semibold mb-2">Pièces jointes</label>
|
||||
<p:fileUpload mode="basic"
|
||||
multiple="true"
|
||||
chooseLabel="Choisir des fichiers"
|
||||
styleClass="w-full" />
|
||||
<small class="text-500">Formats acceptés: jpg, png, pdf, doc, xlsx (max 10MB par fichier)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('nouveauTicketDialog').hide()"
|
||||
type="button" />
|
||||
<p:commandButton value="Créer le Ticket"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-send" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
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">
|
||||
|
||||
<ui:param name="page" value="#{demandesAideBean}"/>
|
||||
<ui:define name="title">Traitement des Demandes d'Aide - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<h:form id="formTraitement">
|
||||
<p:messages id="messages" showDetail="true" closable="true"/>
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="card mb-3">
|
||||
<div class="flex justify-content-between align-items-center flex-column md:flex-row">
|
||||
<div>
|
||||
<h3 class="m-0">
|
||||
<i class="pi pi-inbox text-primary mr-2"></i>
|
||||
Traitement des Demandes d'Aide
|
||||
</h3>
|
||||
<p class="text-600 m-0 mt-2">
|
||||
Gérez et traitez les demandes d'aide des membres
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-2 md:mt-0">
|
||||
<p:commandButton value="Actualiser"
|
||||
icon="pi pi-refresh"
|
||||
styleClass="ui-button-outlined ui-button-secondary"
|
||||
action="#{demandesAideBean.actualiser}"
|
||||
update="@form"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques -->
|
||||
<div class="grid mb-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-blue-100 border-left-3 border-blue-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-blue-900 font-bold text-2xl">#{demandesAideBean.statistiques.totalDemandes}</div>
|
||||
<div class="text-blue-700">Total Demandes</div>
|
||||
</div>
|
||||
<div class="bg-blue-500 text-white border-round text-center"
|
||||
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
||||
<i class="pi pi-inbox text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-orange-100 border-left-3 border-orange-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-orange-900 font-bold text-2xl">#{demandesAideBean.statistiques.demandesEnAttente}</div>
|
||||
<div class="text-orange-700">En Attente</div>
|
||||
</div>
|
||||
<div class="bg-orange-500 text-white border-round text-center"
|
||||
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
||||
<i class="pi pi-clock text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-green-100 border-left-3 border-green-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-green-900 font-bold text-2xl">#{demandesAideBean.statistiques.demandesApprouvees}</div>
|
||||
<div class="text-green-700">Approuvées</div>
|
||||
</div>
|
||||
<div class="bg-green-500 text-white border-round text-center"
|
||||
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
||||
<i class="pi pi-check text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-red-100 border-left-3 border-red-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-red-900 font-bold text-2xl">#{demandesAideBean.statistiques.demandesRejetees}</div>
|
||||
<div class="text-red-700">Rejetées</div>
|
||||
</div>
|
||||
<div class="bg-red-500 text-white border-round text-center"
|
||||
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
||||
<i class="pi pi-times text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liste des demandes -->
|
||||
<div class="card">
|
||||
<h5 class="mb-3">Demandes à Traiter</h5>
|
||||
|
||||
<p:dataTable id="dtDemandes"
|
||||
var="demande"
|
||||
value="#{demandesAideBean.demandesFiltrees}"
|
||||
paginator="true"
|
||||
rows="10"
|
||||
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
|
||||
rowsPerPageTemplate="5,10,25"
|
||||
currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords}"
|
||||
styleClass="mt-3">
|
||||
|
||||
<p:column headerText="Demandeur" sortBy="#{demande.demandeur}">
|
||||
<div>
|
||||
<div class="font-medium">#{demande.demandeur}</div>
|
||||
<small class="text-600">#{demande.telephone}</small>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{demande.type}">
|
||||
<p:tag value="#{demande.typeLibelle}" severity="#{demande.typeSeverity}" icon="pi #{demande.typeIcon}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant" sortBy="#{demande.montantDemande}">
|
||||
<div class="font-bold text-green-500">#{demande.montantDemande} FCFA</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{demande.statut}">
|
||||
<p:tag value="#{demande.statut}"
|
||||
severity="#{demande.statutSeverity}"
|
||||
icon="pi #{demande.statutIcon}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date" sortBy="#{demande.dateDemande}">
|
||||
<h:outputText value="#{demande.dateDemande}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
||||
</h:outputText>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:200px">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-info"
|
||||
action="#{demandesAideBean.voirDetails(demande)}"
|
||||
title="Voir détails"/>
|
||||
<p:commandButton icon="pi pi-check"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-success"
|
||||
action="#{demandesAideBean.approuver(demande)}"
|
||||
title="Approuver"
|
||||
rendered="#{demande.statut == 'EN_ATTENTE'}"/>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-danger"
|
||||
action="#{demandesAideBean.rejeter(demande)}"
|
||||
title="Rejeter"
|
||||
rendered="#{demande.statut == 'EN_ATTENTE'}"/>
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,368 @@
|
||||
<!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">Tutoriels Vidéo - 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-video text-orange-500 mr-3"></i>
|
||||
Tutoriels Vidéo
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Apprenez UnionFlow grâce à nos tutoriels vidéo étape par étape
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Playlist Complète"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-play-circle" />
|
||||
<p:commandButton value="Télécharger"
|
||||
styleClass="p-button-primary p-button-outlined"
|
||||
icon="pi pi-download" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques -->
|
||||
<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-blue-500 mb-2">24</div>
|
||||
<div class="text-900 font-semibold mb-1">Tutoriels</div>
|
||||
<div class="text-600 text-sm">Disponibles</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">4h 32m</div>
|
||||
<div class="text-900 font-semibold mb-1">Durée Totale</div>
|
||||
<div class="text-600 text-sm">Contenu vidéo</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">1,847</div>
|
||||
<div class="text-900 font-semibold mb-1">Vues</div>
|
||||
<div class="text-600 text-sm">Ce mois-ci</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-orange-500 mb-2">4.8★</div>
|
||||
<div class="text-900 font-semibold mb-1">Note Moyenne</div>
|
||||
<div class="text-600 text-sm">Sur 156 avis</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtrres et recherche -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h:form id="filtresForm">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="categorieFilter" class="block text-900 font-semibold mb-2">Catégorie</label>
|
||||
<p:selectOneMenu id="categorieFilter" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les catégories" itemValue="" />
|
||||
<f:selectItem itemLabel="Premiers Pas" itemValue="debutant" />
|
||||
<f:selectItem itemLabel="Gestion des Membres" itemValue="membres" />
|
||||
<f:selectItem itemLabel="Finances" itemValue="finances" />
|
||||
<f:selectItem itemLabel="Événements" itemValue="evenements" />
|
||||
<f:selectItem itemLabel="Administration" itemValue="admin" />
|
||||
<f:selectItem itemLabel="Rapports" itemValue="rapports" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="dureeFilter" class="block text-900 font-semibold mb-2">Durée</label>
|
||||
<p:selectOneMenu id="dureeFilter" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les durées" itemValue="" />
|
||||
<f:selectItem itemLabel="Moins de 5 min" itemValue="court" />
|
||||
<f:selectItem itemLabel="5-15 min" itemValue="moyen" />
|
||||
<f:selectItem itemLabel="Plus de 15 min" itemValue="long" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="rechercheVideo" class="block text-900 font-semibold mb-2">Rechercher</label>
|
||||
<p:inputText id="rechercheVideo"
|
||||
placeholder="Titre, mots-clés..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liste des tutoriels par catégorie -->
|
||||
<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-play mr-2"></i>
|
||||
Premiers Pas avec UnionFlow
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Tutoriel 1 -->
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
||||
<div class="relative">
|
||||
<div class="w-full h-12rem bg-primary-50 border-round-top flex align-items-center justify-content-center">
|
||||
<i class="pi pi-play-circle text-6xl text-primary-500"></i>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 m-2">
|
||||
<p:tag value="3:45" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0 h-1rem bg-blue-500" style="width: 25%; opacity: 0.8;"></div>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h6 class="text-900 font-semibold mb-2">Première Connexion</h6>
|
||||
<p class="text-600 text-sm mb-3">Découvrez comment vous connecter pour la première fois à UnionFlow</p>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-eye text-600 text-sm"></i>
|
||||
<span class="text-600 text-sm">2,341 vues</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-400"></i>
|
||||
<span class="text-600 text-sm">4.9</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutoriel 2 -->
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
||||
<div class="relative">
|
||||
<div class="w-full h-12rem bg-green-50 border-round-top flex align-items-center justify-content-center">
|
||||
<i class="pi pi-play-circle text-6xl text-green-500"></i>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 m-2">
|
||||
<p:tag value="7:22" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0 h-1rem bg-blue-500" style="width: 100%; opacity: 0.8;"></div>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h6 class="text-900 font-semibold mb-2">Navigation dans l'Interface</h6>
|
||||
<p class="text-600 text-sm mb-3">Tour complet de l'interface utilisateur et des menus principaux</p>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-eye text-600 text-sm"></i>
|
||||
<span class="text-600 text-sm">1,876 vues</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-400"></i>
|
||||
<span class="text-600 text-sm">4.7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutoriel 3 -->
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
||||
<div class="relative">
|
||||
<div class="w-full h-12rem bg-orange-50 border-round-top flex align-items-center justify-content-center">
|
||||
<i class="pi pi-play-circle text-6xl text-orange-500"></i>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 m-2">
|
||||
<p:tag value="5:18" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0 h-1rem bg-blue-500" style="width: 60%; opacity: 0.8;"></div>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h6 class="text-900 font-semibold mb-2">Personnaliser son Profil</h6>
|
||||
<p class="text-600 text-sm mb-3">Comment configurer vos informations personnelles et préférences</p>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-eye text-600 text-sm"></i>
|
||||
<span class="text-600 text-sm">1,432 vues</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-400"></i>
|
||||
<span class="text-600 text-sm">4.8</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gestion des Membres -->
|
||||
<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>
|
||||
Gestion des Membres
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Tutoriel Membre 1 -->
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
||||
<div class="relative">
|
||||
<div class="w-full h-12rem bg-blue-50 border-round-top flex align-items-center justify-content-center">
|
||||
<i class="pi pi-play-circle text-6xl text-blue-500"></i>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 m-2">
|
||||
<p:tag value="12:45" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="absolute top-0 left-0 m-2">
|
||||
<p:tag value="NOUVEAU" severity="danger" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h6 class="text-900 font-semibold mb-2">Inscrire un Nouveau Membre</h6>
|
||||
<p class="text-600 text-sm mb-3">Processus complet d'inscription d'un membre avec toutes les étapes</p>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-eye text-600 text-sm"></i>
|
||||
<span class="text-600 text-sm">987 vues</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-400"></i>
|
||||
<span class="text-600 text-sm">5.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutoriel Membre 2 -->
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
||||
<div class="relative">
|
||||
<div class="w-full h-12rem bg-purple-50 border-round-top flex align-items-center justify-content-center">
|
||||
<i class="pi pi-play-circle text-6xl text-purple-500"></i>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 m-2">
|
||||
<p:tag value="8:33" severity="help" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h6 class="text-900 font-semibold mb-2">Recherche Avancée</h6>
|
||||
<p class="text-600 text-sm mb-3">Utiliser les filtres et critères de recherche pour trouver des membres</p>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-eye text-600 text-sm"></i>
|
||||
<span class="text-600 text-sm">1,234 vues</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-400"></i>
|
||||
<span class="text-600 text-sm">4.6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tutoriel Membre 3 -->
|
||||
<div class="col-12 lg:col-6 xl:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round transition-duration-200 cursor-pointer">
|
||||
<div class="relative">
|
||||
<div class="w-full h-12rem bg-teal-50 border-round-top flex align-items-center justify-content-center">
|
||||
<i class="pi pi-play-circle text-6xl text-teal-500"></i>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 m-2">
|
||||
<p:tag value="15:27" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h6 class="text-900 font-semibold mb-2">Export et Rapports Membres</h6>
|
||||
<p class="text-600 text-sm mb-3">Générer des exports Excel et des rapports personnalisés</p>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-eye text-600 text-sm"></i>
|
||||
<span class="text-600 text-sm">765 vues</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-400"></i>
|
||||
<span class="text-600 text-sm">4.9</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Playlist recommandées -->
|
||||
<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-bookmark mr-2"></i>
|
||||
Playlists Recommandées
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<i class="pi pi-play-circle text-2xl text-primary mr-3"></i>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Formation Complète Débutant</h6>
|
||||
<p class="text-600 text-sm mb-0">8 vidéos • 45 min</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Parcours complet pour débuter avec UnionFlow, de la connexion à la première utilisation
|
||||
</p>
|
||||
<p:commandButton value="Commencer"
|
||||
styleClass="p-button-primary p-button-sm w-full"
|
||||
icon="pi pi-play" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<i class="pi pi-cog text-2xl text-orange-500 mr-3"></i>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Administration Avancée</h6>
|
||||
<p class="text-600 text-sm mb-0">12 vidéos • 2h 15min</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
Maîtrisez l'administration d'UnionFlow : utilisateurs, rôles, permissions et configuration
|
||||
</p>
|
||||
<p:commandButton value="Commencer"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-play" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
Reference in New Issue
Block a user