575 lines
33 KiB
HTML
575 lines
33 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">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> |