469 lines
32 KiB
HTML
469 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:p="http://primefaces.org/ui"
|
|
template="/templates/main-template.xhtml">
|
|
|
|
<ui:param name="page" value="#{demandesAideBean}"/>
|
|
<ui:define name="title">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> |