335 lines
23 KiB
HTML
335 lines
23 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="#{ticketBean}"/>
|
|
<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"
|
|
action="#{ticketBean.ouvrirDialogNouveauTicket}"
|
|
update="@form" />
|
|
<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">#{ticketBean.totalTickets}</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">#{ticketBean.ticketsEnAttente}</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">#{ticketBean.ticketsResolus}</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">#{ticketBean.ticketsFermes}</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>
|
|
|
|
<ui:repeat value="#{ticketBean.tickets}" var="ticket">
|
|
<!-- Ticket dynamique -->
|
|
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200 #{ticket.statut == 'FERME' ? '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 #{ticket.statut == 'RESOLU' ? 'bg-green-100' : (ticket.statut == 'EN_ATTENTE' ? 'bg-blue-100' : (ticket.statut == 'FERME' ? 'bg-red-100' : 'bg-orange-100'))} flex align-items-center justify-content-center">
|
|
<i class="pi #{ticket.statut == 'RESOLU' ? 'pi-check' : (ticket.statut == 'EN_ATTENTE' ? 'pi-pause' : (ticket.statut == 'FERME' ? 'pi-times' : 'pi-clock'))} #{ticket.statut == 'RESOLU' ? 'text-green-600' : (ticket.statut == 'EN_ATTENTE' ? 'text-blue-600' : (ticket.statut == 'FERME' ? 'text-red-600' : 'text-orange-600'))} text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">#{ticket.numeroTicket} - #{ticket.sujet}</h6>
|
|
<div class="flex align-items-center gap-2 mb-1">
|
|
<p:tag value="#{ticket.statut}"
|
|
severity="#{ticket.statut == 'RESOLU' ? 'success' : (ticket.statut == 'FERME' ? 'danger' : (ticket.statut == 'EN_ATTENTE' ? 'info' : 'warning'))}"
|
|
styleClass="text-xs" />
|
|
<p:tag value="#{ticket.priorite}"
|
|
severity="#{ticket.priorite == 'URGENTE' or ticket.priorite == 'HAUTE' ? 'danger' : (ticket.priorite == 'NORMALE' ? 'success' : 'secondary')}"
|
|
styleClass="text-xs" />
|
|
<p:tag value="#{ticket.categorie}"
|
|
severity="info"
|
|
styleClass="text-xs" />
|
|
</div>
|
|
<p class="text-600 text-sm mb-0">
|
|
Créé le #{ticket.dateCreation != null ? ticket.dateCreation : 'N/A'}
|
|
#{ticket.dateDerniereReponse != null ? ' • Dernière réponse ' + ticket.dateDerniereReponse : ''}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
#{ticket.agentNom != null ? '<div class="text-600 text-sm mb-2">Agent: ' + ticket.agentNom + '</div>' : ''}
|
|
<p:commandButton value="Voir Détails"
|
|
styleClass="p-button-outlined p-button-sm"
|
|
icon="pi pi-eye"
|
|
action="#{ticketBean.voirDetails}"
|
|
update="@form">
|
|
<f:setPropertyActionListener target="#{ticketBean.ticketSelectionne}" value="#{ticket}" />
|
|
</p:commandButton>
|
|
</div>
|
|
</div>
|
|
<p class="text-700 line-height-3 mb-3">
|
|
#{ticket.description != null ? ticket.description : 'Aucune description'}
|
|
</p>
|
|
#{ticket.resolution != null ? '<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> ' + ticket.resolution + '</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">#{ticket.nbMessages != null ? ticket.nbMessages : 0} message#{ticket.nbMessages != null and ticket.nbMessages > 1 ? 's' : ''}</span>
|
|
#{ticket.nbFichiers != null and ticket.nbFichiers > 0 ? '<i class="pi pi-paperclip text-600 ml-3"></i><span class="text-600 text-sm">' + ticket.nbFichiers + ' fichier' + (ticket.nbFichiers > 1 ? 's' : '') + '</span>' : ''}
|
|
</div>
|
|
#{ticket.noteSatisfaction != null ? '<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: ' + ticket.noteSatisfaction + '/5</span></div>' : ''}
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
|
|
<p:dataTable value="#{ticketBean.tickets}"
|
|
var="ticket"
|
|
emptyMessage="Aucun ticket trouvé"
|
|
rendered="#{empty ticketBean.tickets}">
|
|
<p:column headerText="Numéro">#{ticket.numeroTicket}</p:column>
|
|
<p:column headerText="Sujet">#{ticket.sujet}</p:column>
|
|
<p:column headerText="Statut">
|
|
<p:tag value="#{ticket.statut}"
|
|
severity="#{ticket.statut == 'RESOLU' ? 'success' : (ticket.statut == 'FERME' ? 'danger' : (ticket.statut == 'EN_ATTENTE' ? 'info' : 'warning'))}" />
|
|
</p:column>
|
|
<p:column headerText="Priorité">
|
|
<p:tag value="#{ticket.priorite}"
|
|
severity="#{ticket.priorite == 'URGENTE' or ticket.priorite == 'HAUTE' ? 'danger' : (ticket.priorite == 'NORMALE' ? 'success' : 'secondary')}" />
|
|
</p:column>
|
|
<p:column headerText="Date Création">#{ticket.dateCreation}</p:column>
|
|
<p:column headerText="Actions">
|
|
<p:commandButton icon="pi pi-eye"
|
|
styleClass="p-button-text p-button-sm"
|
|
title="Voir détails"
|
|
action="#{ticketBean.voirDetails}"
|
|
update="@form">
|
|
<f:setPropertyActionListener target="#{ticketBean.ticketSelectionne}" value="#{ticket}" />
|
|
</p:commandButton>
|
|
</p:column>
|
|
</p:dataTable>
|
|
</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"
|
|
visible="#{ticketBean.afficherDialogNouveauTicket}">
|
|
<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"
|
|
action="#{ticketBean.fermerDialogNouveauTicket}"
|
|
update="@form"
|
|
type="button" />
|
|
<p:commandButton value="Créer le Ticket"
|
|
styleClass="p-button-primary"
|
|
icon="pi pi-send"
|
|
action="#{ticketBean.creerTicket}"
|
|
update="@form" />
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
</div>
|
|
</ui:define>
|
|
|
|
</ui:composition> |