Configure Maven repository for unionflow-server-api dependency
This commit is contained in:
dahoud
@@ -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>
|
||||
Reference in New Issue
Block a user