385 lines
22 KiB
HTML
385 lines
22 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:define name="title">Mon Tableau de Bord - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<!-- En-tête personnalisé -->
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center">
|
|
<div class="border-circle overflow-hidden mr-4"
|
|
style="width: 80px; height: 80px;">
|
|
<h:graphicImage value="#{membreDashboardBean.membre.photoUrl}"
|
|
style="width: 100%; height: 100%; object-fit: cover;"
|
|
rendered="#{membreDashboardBean.membre.photoUrl != null}" />
|
|
<div class="bg-primary text-white flex align-items-center justify-content-center w-full h-full"
|
|
rendered="#{membreDashboardBean.membre.photoUrl == null}">
|
|
<span style="font-size: 2rem;">#{membreDashboardBean.membre.initiales}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="mb-1">Bonjour #{membreDashboardBean.membre.prenom} ! 👋</h3>
|
|
<p class="text-600 m-0">
|
|
<i class="pi pi-id-card mr-1"></i>
|
|
#{membreDashboardBean.membre.numeroMembre} • #{membreDashboardBean.membre.typeMembre}
|
|
</p>
|
|
<p class="text-600 m-0">
|
|
<i class="pi pi-calendar mr-1"></i>
|
|
Membre depuis #{membreDashboardBean.membre.dateAdhesion}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<h:form id="formProfileActions">
|
|
<div class="flex gap-2">
|
|
<p:commandButton value="Mon profil"
|
|
icon="pi pi-user"
|
|
styleClass="ui-button-outlined ui-button-info"
|
|
action="/pages/membre/profil?faces-redirect=true" />
|
|
<p:commandButton value="Mes cotisations"
|
|
icon="pi pi-dollar"
|
|
styleClass="ui-button-outlined ui-button-success"
|
|
action="/pages/membre/cotisations?faces-redirect=true" />
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Résumé du statut -->
|
|
<div class="grid">
|
|
<div class="col-12 md:col-3">
|
|
<div class="card bg-blue-100 border-left-3 border-blue-500">
|
|
<div class="flex justify-content-between">
|
|
<div>
|
|
<div class="text-blue-900 font-bold text-2xl">#{membreDashboardBean.statutCotisations}</div>
|
|
<div class="text-blue-700">Statut Cotisations</div>
|
|
</div>
|
|
<div class="bg-blue-500 text-white border-round text-center"
|
|
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
|
<i class="pi pi-check-circle text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-3">
|
|
<div class="card bg-green-100 border-left-3 border-green-500">
|
|
<div class="flex justify-content-between">
|
|
<div>
|
|
<div class="text-green-900 font-bold text-2xl">#{membreDashboardBean.evenementsInscrits}</div>
|
|
<div class="text-green-700">Événements à venir</div>
|
|
</div>
|
|
<div class="bg-green-500 text-white border-round text-center"
|
|
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
|
<i class="pi pi-calendar text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-3">
|
|
<div class="card bg-purple-100 border-left-3 border-purple-500">
|
|
<div class="flex justify-content-between">
|
|
<div>
|
|
<div class="text-purple-900 font-bold text-2xl">#{membreDashboardBean.aidesRecues}</div>
|
|
<div class="text-purple-700">Aides Reçues</div>
|
|
</div>
|
|
<div class="bg-purple-500 text-white border-round text-center"
|
|
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
|
<i class="pi pi-heart text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-3">
|
|
<div class="card bg-orange-100 border-left-3 border-orange-500">
|
|
<div class="flex justify-content-between">
|
|
<div>
|
|
<div class="text-orange-900 font-bold text-2xl">#{membreDashboardBean.messagesNonLus}</div>
|
|
<div class="text-orange-700">Messages Non Lus</div>
|
|
</div>
|
|
<div class="bg-orange-500 text-white border-round text-center"
|
|
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
|
<i class="pi pi-envelope text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alertes et notifications -->
|
|
<div class="card" rendered="#{not empty membreDashboardBean.alertes}">
|
|
<h5>
|
|
<i class="pi pi-bell text-orange-500 mr-2"></i>
|
|
Notifications Importantes
|
|
</h5>
|
|
<ui:repeat value="#{membreDashboardBean.alertes}" var="alerte" varStatus="status">
|
|
<div class="flex align-items-start p-3 mb-2 border-round border-left-3 #{alerte.couleurBordure}"
|
|
style="background: #{alerte.couleurFond};">
|
|
<i class="pi #{alerte.icone} #{alerte.couleurIcone} text-xl mr-3 mt-1"></i>
|
|
<div class="flex-1">
|
|
<div class="font-medium text-900 mb-1">#{alerte.titre}</div>
|
|
<div class="text-600 mb-2">#{alerte.message}</div>
|
|
<small class="text-500">#{alerte.dateRelative}</small>
|
|
</div>
|
|
<h:form id="formAlerte#{status.index}">
|
|
<div class="flex gap-1 ml-3">
|
|
<p:commandButton icon="pi pi-check"
|
|
styleClass="ui-button-rounded ui-button-text ui-button-sm"
|
|
action="#{membreDashboardBean.marquerLue(alerte)}"
|
|
title="Marquer comme lue" />
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
|
|
<!-- Actions rapides -->
|
|
<div class="card">
|
|
<h5>Actions Rapides</h5>
|
|
<div class="grid">
|
|
<div class="col-12 md:col-4">
|
|
<div class="surface-50 p-4 border-round text-center h-full">
|
|
<i class="pi pi-dollar text-green-500 text-3xl mb-3"></i>
|
|
<div class="font-medium text-900 mb-2">Cotisations</div>
|
|
<div class="text-600 mb-3 text-sm">Consultez votre situation et payez en ligne</div>
|
|
<h:form id="formActionCotisations">
|
|
<p:commandButton value="Voir mes cotisations"
|
|
icon="pi pi-arrow-right"
|
|
styleClass="ui-button-outlined ui-button-success w-full"
|
|
action="/pages/membre/cotisations?faces-redirect=true" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-4">
|
|
<div class="surface-50 p-4 border-round text-center h-full">
|
|
<i class="pi pi-calendar text-blue-500 text-3xl mb-3"></i>
|
|
<div class="font-medium text-900 mb-2">Événements</div>
|
|
<div class="text-600 mb-3 text-sm">Découvrez et inscrivez-vous aux événements</div>
|
|
<h:form id="formActionEvenements">
|
|
<p:commandButton value="Voir les événements"
|
|
icon="pi pi-arrow-right"
|
|
styleClass="ui-button-outlined ui-button-info w-full"
|
|
action="/pages/membre/evenements?faces-redirect=true" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-4">
|
|
<div class="surface-50 p-4 border-round text-center h-full">
|
|
<i class="pi pi-file-edit text-purple-500 text-3xl mb-3"></i>
|
|
<div class="font-medium text-900 mb-2">Demandes</div>
|
|
<div class="text-600 mb-3 text-sm">Faites une demande d'aide ou de service</div>
|
|
<h:form id="formActionDemandes">
|
|
<p:commandButton value="Nouvelle demande"
|
|
icon="pi pi-arrow-right"
|
|
styleClass="ui-button-outlined ui-button-warning w-full"
|
|
action="/pages/membre/demandes?faces-redirect=true" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mes prochains événements -->
|
|
<div class="grid">
|
|
<div class="col-12 md:col-8">
|
|
<div class="card">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<h5 class="m-0">
|
|
<i class="pi pi-calendar text-blue-500 mr-2"></i>
|
|
Mes Prochains Événements
|
|
</h5>
|
|
<h:form id="formVoirTousEvenements">
|
|
<p:commandButton value="Voir tous"
|
|
icon="pi pi-arrow-right"
|
|
styleClass="ui-button-text ui-button-sm"
|
|
action="/pages/membre/evenements?faces-redirect=true" />
|
|
</h:form>
|
|
</div>
|
|
|
|
<ui:repeat value="#{membreDashboardBean.prochainsEvenements}" var="evenement" varStatus="status">
|
|
<div class="flex align-items-start p-3 mb-3 border-round border-left-3 #{evenement.couleurBordure}"
|
|
style="background: var(--surface-50);">
|
|
<div class="border-round p-3 mr-3 #{evenement.couleurCategorie}">
|
|
<i class="pi #{evenement.iconeType} text-white"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="font-medium text-900">#{evenement.titre}</span>
|
|
<p:tag value="#{evenement.statutInscription}" severity="#{evenement.severityInscription}" />
|
|
</div>
|
|
<div class="text-600 mb-1">
|
|
<i class="pi pi-calendar mr-1"></i>
|
|
#{evenement.dateComplete}
|
|
</div>
|
|
<div class="text-600 mb-2">
|
|
<i class="pi pi-map-marker mr-1"></i>
|
|
#{evenement.lieu}
|
|
</div>
|
|
<div class="flex align-items-center gap-2">
|
|
<span class="text-sm #{evenement.couleurPrix}">#{evenement.prixFormate}</span>
|
|
<span class="text-sm text-600">#{evenement.nombreParticipants} participants</span>
|
|
</div>
|
|
</div>
|
|
<h:form id="formEvenement#{status.index}">
|
|
<div class="flex gap-1 ml-3">
|
|
<p:commandButton icon="pi pi-eye"
|
|
styleClass="ui-button-rounded ui-button-text ui-button-sm"
|
|
action="#{membreDashboardBean.voirEvenement(evenement)}" />
|
|
<p:commandButton icon="pi pi-calendar-times"
|
|
styleClass="ui-button-rounded ui-button-text ui-button-danger ui-button-sm"
|
|
action="#{membreDashboardBean.annulerInscription(evenement)}"
|
|
rendered="#{evenement.peutAnnuler}"
|
|
onclick="return confirm('Êtes-vous sûr de vouloir annuler votre inscription ?');" />
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</ui:repeat>
|
|
|
|
<div class="text-center p-4" rendered="#{empty membreDashboardBean.prochainsEvenements}">
|
|
<i class="pi pi-calendar text-6xl text-300 mb-3"></i>
|
|
<div class="text-600 mb-3">Aucun événement à venir</div>
|
|
<h:form id="formDecouvrirEvenements">
|
|
<p:commandButton value="Découvrir les événements"
|
|
icon="pi pi-search"
|
|
styleClass="ui-button-outlined ui-button-info"
|
|
action="/pages/membre/evenements?faces-redirect=true" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-4">
|
|
<div class="card">
|
|
<h5>
|
|
<i class="pi pi-chart-pie text-green-500 mr-2"></i>
|
|
Ma Situation
|
|
</h5>
|
|
|
|
<div class="surface-50 p-3 border-round mb-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="font-medium">Cotisations 2024</span>
|
|
<span class="font-bold text-green-500">#{membreDashboardBean.cotisationsPayees}/#{membreDashboardBean.cotisationsTotales}</span>
|
|
</div>
|
|
<p:progressBar value="#{membreDashboardBean.progressionCotisations}"
|
|
labelTemplate="#{membreDashboardBean.progressionCotisations}% payé"
|
|
styleClass="h-1rem" />
|
|
</div>
|
|
|
|
<div class="surface-50 p-3 border-round mb-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="font-medium">Participation aux événements</span>
|
|
<span class="font-bold text-blue-500">#{membreDashboardBean.tauxParticipation}%</span>
|
|
</div>
|
|
<div class="text-sm text-600">#{membreDashboardBean.evenementsAssistes} événements cette année</div>
|
|
</div>
|
|
|
|
<div class="surface-50 p-3 border-round">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="font-medium">Ancienneté</span>
|
|
<span class="font-bold text-purple-500">#{membreDashboardBean.anciennete}</span>
|
|
</div>
|
|
<div class="text-sm text-600">Membre depuis #{membreDashboardBean.dateAdhesionFormatee}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rappels -->
|
|
<div class="card">
|
|
<h5>
|
|
<i class="pi pi-clock text-orange-500 mr-2"></i>
|
|
Rappels
|
|
</h5>
|
|
|
|
<ui:repeat value="#{membreDashboardBean.rappels}" var="rappel" varStatus="status">
|
|
<div class="flex align-items-center p-2 mb-2 border-round #{rappel.couleurFond}">
|
|
<i class="pi #{rappel.icone} #{rappel.couleurIcone} mr-2"></i>
|
|
<div class="flex-1">
|
|
<div class="font-medium text-sm">#{rappel.titre}</div>
|
|
<small class="text-600">#{rappel.echeance}</small>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
|
|
<div class="text-center p-3" rendered="#{empty membreDashboardBean.rappels}">
|
|
<i class="pi pi-check-circle text-green-500 text-2xl mb-2"></i>
|
|
<div class="text-600 text-sm">Tout est à jour !</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Historique récent -->
|
|
<div class="card">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<h5 class="m-0">
|
|
<i class="pi pi-history text-purple-500 mr-2"></i>
|
|
Activité Récente
|
|
</h5>
|
|
<h:form id="formHistoriqueComplet">
|
|
<p:commandButton value="Voir l'historique complet"
|
|
icon="pi pi-arrow-right"
|
|
styleClass="ui-button-text ui-button-sm"
|
|
action="/pages/membre/historique?faces-redirect=true" />
|
|
</h:form>
|
|
</div>
|
|
|
|
<p:timeline value="#{membreDashboardBean.activiteRecente}" var="activite" align="left">
|
|
<p:timelineEvent>
|
|
<div class="flex align-items-center">
|
|
<div class="border-round p-2 mr-3 #{activite.couleurCategorie}">
|
|
<i class="pi #{activite.icone} text-white text-sm"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-medium text-900">#{activite.titre}</div>
|
|
<div class="text-600 text-sm">#{activite.description}</div>
|
|
<small class="text-500">#{activite.dateRelative}</small>
|
|
</div>
|
|
</div>
|
|
</p:timelineEvent>
|
|
</p:timeline>
|
|
|
|
<div class="text-center p-4" rendered="#{empty membreDashboardBean.activiteRecente}">
|
|
<i class="pi pi-info-circle text-3xl text-300 mb-2"></i>
|
|
<div class="text-600">Aucune activité récente</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Boutons d'action rapide -->
|
|
<div class="card">
|
|
<h:form id="formBoutonsAction">
|
|
<div class="flex flex-wrap gap-2 justify-content-center">
|
|
<p:commandButton value="Payer mes cotisations"
|
|
icon="pi pi-credit-card"
|
|
styleClass="ui-button-success"
|
|
action="#{membreDashboardBean.payerCotisations}"
|
|
rendered="#{membreDashboardBean.peutPayerCotisations}" />
|
|
<p:commandButton value="Faire une demande"
|
|
icon="pi pi-file-edit"
|
|
styleClass="ui-button-outlined ui-button-warning"
|
|
action="/pages/membre/demandes/creation?faces-redirect=true" />
|
|
<p:commandButton value="Contacter l'administration"
|
|
icon="pi pi-envelope"
|
|
styleClass="ui-button-outlined ui-button-info"
|
|
action="/pages/membre/contact?faces-redirect=true" />
|
|
<p:commandButton value="Mes documents"
|
|
icon="pi pi-folder"
|
|
styleClass="ui-button-outlined ui-button-secondary"
|
|
action="/pages/membre/documents?faces-redirect=true" />
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</ui:define>
|
|
|
|
</ui:composition> |