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