463 lines
31 KiB
HTML
463 lines
31 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">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> |