Configure Maven repository for unionflow-server-api dependency
This commit is contained in:
dahoud
575
target/classes/META-INF/resources/pages/membre/cotisations.xhtml
Normal file
575
target/classes/META-INF/resources/pages/membre/cotisations.xhtml
Normal file
@@ -0,0 +1,575 @@
|
||||
<!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">Mes Cotisations - 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>
|
||||
<h3 class="mb-2">
|
||||
<i class="pi pi-dollar text-green-500 mr-2"></i>
|
||||
Mes Cotisations
|
||||
</h3>
|
||||
<p class="text-600 m-0">Membre #{membreCotisationBean.numeroMembre} • Statut: #{membreCotisationBean.statutCotisations} • Dernière mise à jour: #{membreCotisationBean.derniereMAJ}</p>
|
||||
</div>
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Payer maintenant"
|
||||
icon="pi pi-credit-card"
|
||||
styleClass="ui-button-success"
|
||||
onclick="PF('dlgPaiement').show();"
|
||||
rendered="#{membreCotisationBean.peutPayer}" />
|
||||
<p:commandButton value="Historique complet"
|
||||
icon="pi pi-history"
|
||||
styleClass="ui-button-outlined ui-button-info"
|
||||
action="#{membreCotisationBean.voirHistoriqueComplet}" />
|
||||
<p:commandButton value="Télécharger reçus"
|
||||
icon="pi pi-download"
|
||||
styleClass="ui-button-outlined ui-button-secondary"
|
||||
action="#{membreCotisationBean.telechargerRecus}" />
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Résumé cotisations -->
|
||||
<div class="grid">
|
||||
<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">#{membreCotisationBean.cotisationsPayees}</div>
|
||||
<div class="text-green-700">Cotisations Payées</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-check text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<p:progressBar value="#{membreCotisationBean.progressionAnnuelle}"
|
||||
labelTemplate="#{membreCotisationBean.progressionAnnuelle}% de l'année"
|
||||
styleClass="h-1rem" />
|
||||
</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">#{membreCotisationBean.cotisationsEnAttente}</div>
|
||||
<div class="text-orange-700">En Attente</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-clock text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-red-100 border-left-3 border-red-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-red-900 font-bold text-2xl">#{membreCotisationBean.montantDu}</div>
|
||||
<div class="text-red-700">Montant Dû</div>
|
||||
</div>
|
||||
<div class="bg-red-500 text-white border-round text-center"
|
||||
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
||||
<i class="pi pi-exclamation-triangle text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">#{membreCotisationBean.totalVerse}</div>
|
||||
<div class="text-blue-700">Total Versé 2024</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-dollar text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prochaines échéances -->
|
||||
<div class="card" rendered="#{not empty membreCotisationBean.prochainesEcheances}">
|
||||
<h5>
|
||||
<i class="pi pi-calendar text-orange-500 mr-2"></i>
|
||||
Prochaines Échéances
|
||||
</h5>
|
||||
<div class="grid">
|
||||
<ui:repeat value="#{membreCotisationBean.prochainesEcheances}" var="echeance" varStatus="status">
|
||||
<div class="col-12 md:col-6 lg:col-4">
|
||||
<div class="surface-card border-round p-3 border-left-3 #{echeance.couleurUrgence}">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<div>
|
||||
<div class="font-medium text-900">#{echeance.libelle}</div>
|
||||
<small class="text-600">#{echeance.periode}</small>
|
||||
</div>
|
||||
<p:tag value="#{echeance.urgence}" severity="#{echeance.urgenceSeverity}" />
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div class="font-bold text-2xl #{echeance.couleurMontant}">#{echeance.montant}</div>
|
||||
<small class="text-600">Échéance: #{echeance.dateEcheance}</small>
|
||||
</div>
|
||||
<h:form id="formEcheance#{status.index}">
|
||||
<p:commandButton icon="pi pi-credit-card"
|
||||
styleClass="ui-button-rounded ui-button-success"
|
||||
action="#{membreCotisationBean.payerCotisation(echeance)}"
|
||||
title="Payer maintenant" />
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Graphiques et analyses -->
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-8">
|
||||
<div class="card">
|
||||
<h5>Historique des Paiements</h5>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<div class="text-center p-3 surface-50 border-round">
|
||||
<div class="text-lg font-bold text-green-500 mb-1">Jan-Mar</div>
|
||||
<div class="text-sm text-600">15,000 FCFA</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="text-center p-3 surface-50 border-round">
|
||||
<div class="text-lg font-bold text-blue-500 mb-1">Avr-Juin</div>
|
||||
<div class="text-sm text-600">15,000 FCFA</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="text-center p-3 surface-50 border-round">
|
||||
<div class="text-lg font-bold text-purple-500 mb-1">Jul-Sep</div>
|
||||
<div class="text-sm text-600">15,000 FCFA</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="text-center p-3 surface-50 border-round">
|
||||
<div class="text-lg font-bold text-orange-500 mb-1">Oct-Déc</div>
|
||||
<div class="text-sm text-600">10,000 FCFA</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="surface-100 p-3 border-round mt-3 text-center">
|
||||
<div class="text-2xl font-bold text-primary">55,000 FCFA</div>
|
||||
<div class="text-600">Total versé en 2024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>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">Statut Membre</span>
|
||||
<p:tag value="#{membreCotisationBean.statutMembre}"
|
||||
severity="#{membreCotisationBean.statutSeverity}" />
|
||||
</div>
|
||||
<div class="text-sm text-600">Type: #{membreCotisationBean.typeMembre}</div>
|
||||
</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">Cotisation Mensuelle</span>
|
||||
<span class="font-bold text-green-500">#{membreCotisationBean.cotisationMensuelle}</span>
|
||||
</div>
|
||||
<div class="text-sm text-600">Basée sur votre type de membre</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">Ponctualité</span>
|
||||
<span class="font-bold text-blue-500">#{membreCotisationBean.scorePonctualite}%</span>
|
||||
</div>
|
||||
<p:progressBar value="#{membreCotisationBean.scorePonctualite}"
|
||||
labelTemplate=""
|
||||
styleClass="h-1rem mt-1" />
|
||||
<div class="text-sm text-600 mt-1">#{membreCotisationBean.commentairePonctualite}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Moyens de paiement -->
|
||||
<div class="card">
|
||||
<h5>Moyens de Paiement</h5>
|
||||
|
||||
<div class="flex flex-column gap-2">
|
||||
<div class="surface-50 p-3 border-round flex align-items-center">
|
||||
<i class="pi pi-mobile text-blue-500 text-xl mr-3"></i>
|
||||
<div>
|
||||
<div class="font-medium">Wave Money</div>
|
||||
<small class="text-600">Paiement mobile instantané</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-50 p-3 border-round flex align-items-center">
|
||||
<i class="pi pi-money-bill text-green-500 text-xl mr-3"></i>
|
||||
<div>
|
||||
<div class="font-medium">Espèces</div>
|
||||
<small class="text-600">Paiement auprès du trésorier</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-50 p-3 border-round flex align-items-center">
|
||||
<i class="pi pi-building text-purple-500 text-xl mr-3"></i>
|
||||
<div>
|
||||
<div class="font-medium">Virement Bancaire</div>
|
||||
<small class="text-600">Transfert vers compte association</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Historique détaillé -->
|
||||
<div class="card">
|
||||
<h:form id="formCotisations">
|
||||
<h5>Historique de mes Cotisations</h5>
|
||||
|
||||
<!-- Filtres -->
|
||||
<p:toolbar>
|
||||
<p:toolbarGroup>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:selectOneMenu value="#{membreCotisationBean.anneeFilter}">
|
||||
<f:selectItem itemLabel="Cette année" itemValue="2024" />
|
||||
<f:selectItem itemLabel="2023" itemValue="2023" />
|
||||
<f:selectItem itemLabel="2022" itemValue="2022" />
|
||||
<f:selectItem itemLabel="Toutes" itemValue="" />
|
||||
<p:ajax update="dtCotisations" />
|
||||
</p:selectOneMenu>
|
||||
|
||||
<p:selectOneMenu value="#{membreCotisationBean.statutFilter}">
|
||||
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
||||
<f:selectItem itemLabel="Payées" itemValue="PAYE" />
|
||||
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
|
||||
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
|
||||
<p:ajax update="dtCotisations" />
|
||||
</p:selectOneMenu>
|
||||
|
||||
<p:selectOneMenu value="#{membreCotisationBean.typeFilter}">
|
||||
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
||||
<f:selectItem itemLabel="Cotisation mensuelle" itemValue="MENSUELLE" />
|
||||
<f:selectItem itemLabel="Cotisation spéciale" itemValue="SPECIALE" />
|
||||
<f:selectItem itemLabel="Frais adhésion" itemValue="ADHESION" />
|
||||
<p:ajax update="dtCotisations" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</p:toolbarGroup>
|
||||
|
||||
<p:toolbarGroup align="right">
|
||||
<p:commandButton icon="pi pi-refresh"
|
||||
styleClass="ui-button-outlined ui-button-secondary"
|
||||
action="#{membreCotisationBean.actualiser}"
|
||||
update="@form"
|
||||
title="Actualiser" />
|
||||
</p:toolbarGroup>
|
||||
</p:toolbar>
|
||||
|
||||
<!-- DataTable -->
|
||||
<p:dataTable id="dtCotisations"
|
||||
var="cotisation"
|
||||
value="#{membreCotisationBean.cotisations}"
|
||||
paginator="true"
|
||||
rows="10"
|
||||
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
|
||||
rowsPerPageTemplate="5,10,25"
|
||||
currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords}"
|
||||
styleClass="mt-3">
|
||||
|
||||
<p:column headerText="Référence" sortBy="#{cotisation.reference}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.reference}" styleClass="font-mono font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Période" sortBy="#{cotisation.periode}">
|
||||
<div>
|
||||
<div class="font-medium">#{cotisation.libelle}</div>
|
||||
<small class="text-600">#{cotisation.periode}</small>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{cotisation.type}" style="width:140px">
|
||||
<p:tag value="#{cotisation.type}"
|
||||
severity="#{cotisation.typeSeverity}"
|
||||
icon="pi #{cotisation.typeIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant" sortBy="#{cotisation.montant}" style="width:120px">
|
||||
<div class="text-center">
|
||||
<div class="font-bold text-green-500">#{cotisation.montant}</div>
|
||||
<small class="text-600">FCFA</small>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{cotisation.statut}" style="width:120px">
|
||||
<p:tag value="#{cotisation.statut}"
|
||||
severity="#{cotisation.statutSeverity}"
|
||||
icon="pi #{cotisation.statutIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Échéance" sortBy="#{cotisation.dateEcheance}" style="width:120px">
|
||||
<div>
|
||||
<div class="font-medium">#{cotisation.dateEcheance}</div>
|
||||
<small class="#{cotisation.retardColor}">#{cotisation.statutEcheance}</small>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date paiement" sortBy="#{cotisation.datePaiement}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.datePaiement}" rendered="#{cotisation.datePaiement != null}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy" type="localDate" />
|
||||
</h:outputText>
|
||||
<span class="text-400" rendered="#{cotisation.datePaiement == null}">Non payée</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Mode paiement" style="width:130px">
|
||||
<div class="flex align-items-center" rendered="#{cotisation.modePaiement != null}">
|
||||
<i class="pi #{cotisation.modePaiementIcon} mr-2"></i>
|
||||
<span>#{cotisation.modePaiement}</span>
|
||||
</div>
|
||||
<span class="text-400" rendered="#{cotisation.modePaiement == null}">-</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:150px">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton icon="pi pi-credit-card"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-success"
|
||||
action="#{membreCotisationBean.payerCotisation(cotisation)}"
|
||||
title="Payer"
|
||||
rendered="#{cotisation.statut != 'PAYE'}" />
|
||||
<p:commandButton icon="pi pi-file-pdf"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-info"
|
||||
action="#{membreCotisationBean.telechargerRecu(cotisation)}"
|
||||
title="Télécharger reçu"
|
||||
rendered="#{cotisation.statut == 'PAYE'}" />
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-secondary"
|
||||
action="#{membreCotisationBean.voirDetails(cotisation)}"
|
||||
title="Voir détails" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
|
||||
<!-- Résumé en bas -->
|
||||
<div class="mt-3 p-3 surface-100 border-round">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center">
|
||||
<div class="text-600">Total Payé</div>
|
||||
<div class="text-2xl font-bold text-green-600">#{membreCotisationBean.totalPayePeriode}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center">
|
||||
<div class="text-600">En Attente</div>
|
||||
<div class="text-2xl font-bold text-orange-600">#{membreCotisationBean.totalEnAttentePeriode}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center">
|
||||
<div class="text-600">En Retard</div>
|
||||
<div class="text-2xl font-bold text-red-600">#{membreCotisationBean.totalEnRetardPeriode}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center">
|
||||
<div class="text-600">Taux Conformité</div>
|
||||
<div class="text-2xl font-bold text-blue-600">#{membreCotisationBean.tauxConformite}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Paiement -->
|
||||
<p:dialog header="Effectuer un Paiement" widgetVar="dlgPaiement" modal="true" width="600">
|
||||
<h:form id="formPaiement">
|
||||
<div class="ui-fluid">
|
||||
<div class="surface-50 p-3 border-round mb-3">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-info-circle text-blue-500 mr-2"></i>
|
||||
<div>
|
||||
<div class="font-medium">Paiement sécurisé</div>
|
||||
<div class="text-600 text-sm">Toutes les transactions sont cryptées et sécurisées</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="cotisationAPayer" value="Cotisation à payer" />
|
||||
<p:selectOneMenu id="cotisationAPayer" value="#{membreCotisationBean.cotisationSelectionnee}">
|
||||
<f:selectItems value="#{membreCotisationBean.cotisationsImpayees}"
|
||||
var="cot"
|
||||
itemLabel="#{cot.libelle} - #{cot.montant} FCFA (#{cot.dateEcheance})"
|
||||
itemValue="#{cot}" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="modePaiement" value="Mode de paiement" />
|
||||
<p:selectOneMenu id="modePaiement" value="#{membreCotisationBean.modePaiementChoisi}">
|
||||
<f:selectItem itemLabel="📱 Wave Money" itemValue="WAVE" />
|
||||
<f:selectItem itemLabel="🏦 Virement bancaire" itemValue="VIREMENT" />
|
||||
<f:selectItem itemLabel="💰 Remise directe" itemValue="ESPECES" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field" rendered="#{membreCotisationBean.modePaiementChoisi == 'WAVE'}">
|
||||
<p:outputLabel for="numeroWave" value="Numéro Wave Money" />
|
||||
<p:inputText id="numeroWave" value="#{membreCotisationBean.numeroWave}"
|
||||
placeholder="77 123 45 67" />
|
||||
</div>
|
||||
|
||||
<div class="field" rendered="#{membreCotisationBean.modePaiementChoisi == 'VIREMENT'}">
|
||||
<div class="surface-50 p-3 border-round">
|
||||
<div class="font-medium mb-2">Coordonnées bancaires</div>
|
||||
<div class="text-sm text-600">
|
||||
<div>Banque: #{membreCotisationBean.banqueAssociation}</div>
|
||||
<div>IBAN: #{membreCotisationBean.ibanAssociation}</div>
|
||||
<div>Référence: [Votre numéro membre]</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="commentairePaiement" value="Commentaire (optionnel)" />
|
||||
<p:inputTextarea id="commentairePaiement" value="#{membreCotisationBean.commentairePaiement}"
|
||||
rows="2" placeholder="Remarques sur ce paiement..." />
|
||||
</div>
|
||||
|
||||
<div class="surface-100 p-3 border-round">
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
<span class="font-medium">Montant total:</span>
|
||||
<span class="font-bold text-2xl text-green-500">#{membreCotisationBean.montantAPayer} FCFA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-3">
|
||||
<p:commandButton value="Confirmer le paiement" icon="pi pi-check"
|
||||
styleClass="ui-button-success"
|
||||
action="#{membreCotisationBean.confirmerPaiement}"
|
||||
update="@form :formCotisations"
|
||||
oncomplete="if(!args.validationFailed) PF('dlgPaiement').hide();" />
|
||||
<p:commandButton value="Annuler" icon="pi pi-times"
|
||||
styleClass="ui-button-secondary"
|
||||
onclick="PF('dlgPaiement').hide();" type="button" />
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Actions rapides -->
|
||||
<div class="card">
|
||||
<h:form id="formActionsRapides">
|
||||
<div class="flex flex-wrap gap-2 justify-content-center">
|
||||
<p:commandButton value="📱 Paiement Wave Money"
|
||||
icon="pi pi-mobile"
|
||||
styleClass="ui-button-success"
|
||||
action="#{membreCotisationBean.paiementWave}"
|
||||
rendered="#{membreCotisationBean.peutPayerWave}" />
|
||||
<p:commandButton value="📄 Générer attestation"
|
||||
icon="pi pi-file-pdf"
|
||||
styleClass="ui-button-outlined ui-button-info"
|
||||
action="#{membreCotisationBean.genererAttestation}" />
|
||||
<p:commandButton value="📧 Demander reçu"
|
||||
icon="pi pi-envelope"
|
||||
styleClass="ui-button-outlined ui-button-secondary"
|
||||
action="#{membreCotisationBean.demanderRecu}" />
|
||||
<p:commandButton value="💰 Prélèvement automatique"
|
||||
icon="pi pi-sync"
|
||||
styleClass="ui-button-outlined ui-button-warning"
|
||||
onclick="PF('dlgPrelevementAuto').show();" />
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Prélèvement Automatique -->
|
||||
<p:dialog header="Prélèvement Automatique" widgetVar="dlgPrelevementAuto" modal="true" width="500">
|
||||
<h:form id="formPrelevementAuto">
|
||||
<div class="ui-fluid">
|
||||
<div class="surface-50 p-3 border-round mb-3">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-shield text-green-500 mr-2"></i>
|
||||
<div>
|
||||
<div class="font-medium">Service sécurisé</div>
|
||||
<div class="text-600 text-sm">Vos cotisations seront automatiquement prélevées chaque mois</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="numeroWaveAuto" value="Numéro Wave Money" />
|
||||
<p:inputText id="numeroWaveAuto" value="#{membreCotisationBean.numeroWaveAuto}"
|
||||
placeholder="77 123 45 67" required="true" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="jourPrelevement" value="Jour de prélèvement" />
|
||||
<p:selectOneMenu id="jourPrelevement" value="#{membreCotisationBean.jourPrelevement}">
|
||||
<f:selectItem itemLabel="1er du mois" itemValue="1" />
|
||||
<f:selectItem itemLabel="5 du mois" itemValue="5" />
|
||||
<f:selectItem itemLabel="10 du mois" itemValue="10" />
|
||||
<f:selectItem itemLabel="15 du mois" itemValue="15" />
|
||||
<f:selectItem itemLabel="20 du mois" itemValue="20" />
|
||||
<f:selectItem itemLabel="25 du mois" itemValue="25" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:selectBooleanCheckbox id="notificationSMS" value="#{membreCotisationBean.notificationSMS}" />
|
||||
<p:outputLabel for="notificationSMS" value=" Recevoir notification SMS avant prélèvement" />
|
||||
</div>
|
||||
|
||||
<div class="surface-100 p-3 border-round">
|
||||
<div class="font-medium mb-2">Conditions:</div>
|
||||
<ul class="text-sm text-600 ml-3">
|
||||
<li>Montant mensuel: #{membreCotisationBean.cotisationMensuelle} FCFA</li>
|
||||
<li>Vous pouvez suspendre à tout moment</li>
|
||||
<li>Notification 24h avant chaque prélèvement</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-3">
|
||||
<p:commandButton value="Activer" icon="pi pi-check"
|
||||
styleClass="ui-button-warning"
|
||||
action="#{membreCotisationBean.activerPrelevementAuto}"
|
||||
update="@form"
|
||||
oncomplete="if(!args.validationFailed) PF('dlgPrelevementAuto').hide();" />
|
||||
<p:commandButton value="Annuler" icon="pi pi-times"
|
||||
styleClass="ui-button-secondary"
|
||||
onclick="PF('dlgPrelevementAuto').hide();" type="button" />
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
385
target/classes/META-INF/resources/pages/membre/dashboard.xhtml
Normal file
385
target/classes/META-INF/resources/pages/membre/dashboard.xhtml
Normal file
@@ -0,0 +1,385 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user