308 lines
18 KiB
HTML
308 lines
18 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="#{cotisationsBean}"/>
|
|
<ui:define name="title">Paiement de Cotisations - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<!-- En-tête -->
|
|
<ui:include src="/templates/components/layout/page-header.xhtml">
|
|
<ui:param name="icon" value="pi pi-credit-card text-green-500" />
|
|
<ui:param name="title" value="Paiement de Cotisations" />
|
|
<ui:param name="description" value="Enregistrement et suivi des paiements de cotisations" />
|
|
<ui:define name="actions">
|
|
<h:form id="formActionsPaiement">
|
|
<div class="flex gap-2">
|
|
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
|
<ui:param name="icon" value="pi pi-refresh" />
|
|
<ui:param name="action" value="#{cotisationsBean.actualiser}" />
|
|
<ui:param name="update" value="@form" />
|
|
<ui:param name="title" value="Actualiser" />
|
|
<ui:param name="rounded" value="true" />
|
|
<ui:param name="text" value="false" />
|
|
<ui:param name="styleClass" value="ui-button-outlined ui-button-secondary" />
|
|
</ui:include>
|
|
</div>
|
|
</h:form>
|
|
</ui:define>
|
|
</ui:include>
|
|
|
|
<!-- Statistiques de paiement -->
|
|
<div class="grid">
|
|
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
|
<ui:param name="value" value="#{cotisationsBean.statistiques.totalCollecteFormatte}" />
|
|
<ui:param name="label" value="Total Collecté" />
|
|
<ui:param name="icon" value="pi pi-wallet" />
|
|
<ui:param name="bgColor" value="green" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
|
<ui:param name="value" value="#{cotisationsBean.statistiques.moyenneMensuelleFormattee}" />
|
|
<ui:param name="label" value="Moyenne Mensuelle" />
|
|
<ui:param name="icon" value="pi pi-chart-line" />
|
|
<ui:param name="bgColor" value="blue" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
|
<ui:param name="value" value="#{cotisationsBean.statistiques.objectifAnnuelFormatte}" />
|
|
<ui:param name="label" value="Objectif Annuel" />
|
|
<ui:param name="icon" value="pi pi-target" />
|
|
<ui:param name="bgColor" value="orange" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
|
<ui:param name="value" value="#{cotisationsBean.statistiques.tauxRecouvrementInt}%" />
|
|
<ui:param name="label" value="Taux de Recouvrement" />
|
|
<ui:param name="icon" value="pi pi-percentage" />
|
|
<ui:param name="bgColor" value="purple" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<!-- Répartition par méthode de paiement -->
|
|
<div class="card">
|
|
<h5>
|
|
<i class="pi pi-chart-pie mr-2"></i>
|
|
Répartition par Méthode de Paiement
|
|
</h5>
|
|
<div class="grid">
|
|
<div class="col-12 md:col-6">
|
|
<div class="flex flex-column gap-3">
|
|
<ui:repeat value="#{cotisationsBean.repartitionMethodes}" var="methode">
|
|
<div class="flex align-items-center justify-content-between p-3 border-round surface-50">
|
|
<div class="flex align-items-center gap-2">
|
|
<div class="border-round text-white text-center"
|
|
style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem; background: var(--#{methode.couleur});">
|
|
<i class="#{methode.icon}"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium">#{methode.methode}</div>
|
|
<div class="text-600 text-sm">#{methode.montantFormatte}</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="font-bold text-xl">#{methode.pourcentageInt}%</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<div class="flex flex-column gap-2">
|
|
<ui:repeat value="#{cotisationsBean.repartitionMethodes}" var="methode">
|
|
<div>
|
|
<div class="flex justify-content-between mb-1">
|
|
<span class="font-medium">#{methode.methode}</span>
|
|
<span class="text-600">#{methode.pourcentageInt}%</span>
|
|
</div>
|
|
<p:progressBar value="#{methode.pourcentageInt}"
|
|
showValue="false"
|
|
styleClass="progressbar-custom" />
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cotisations en attente de paiement -->
|
|
<div class="card">
|
|
<h:form id="formPaiements">
|
|
<h5>Cotisations en Attente de Paiement</h5>
|
|
|
|
<p:dataTable id="dtPaiements"
|
|
value="#{cotisationsBean.cotisationsFiltrees}"
|
|
var="cotisation"
|
|
filteredValue="#{cotisationsBean.cotisationsFiltrees}"
|
|
paginator="true"
|
|
rows="20"
|
|
emptyMessage="Aucune cotisation en attente"
|
|
selection="#{cotisationsBean.cotisationSelectionnee}"
|
|
selectionMode="single">
|
|
|
|
<f:facet name="header">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<span>Cotisations à payer</span>
|
|
<p:selectOneMenu value="#{cotisationsBean.filtres.statut}" styleClass="w-12rem">
|
|
<f:selectItem itemLabel="Tous" itemValue="" />
|
|
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
|
|
<f:selectItem itemLabel="Partiellement payée" itemValue="PARTIELLEMENT_PAYEE" />
|
|
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
|
|
<p:ajax update="dtPaiements" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
</f:facet>
|
|
|
|
<p:column headerText="Membre" sortBy="#{cotisation.nomMembre}">
|
|
<div>
|
|
<div class="font-medium">#{cotisation.nomMembre}</div>
|
|
<div class="text-600 text-sm">#{cotisation.numeroMembre}</div>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Type" sortBy="#{cotisation.typeCotisation}" style="width:120px">
|
|
<p:tag value="#{cotisation.typeCotisationLibelle}" severity="info" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Montant Dû" sortBy="#{cotisation.montantDu}" style="width:120px">
|
|
<h:outputText value="#{cotisation.montantDuFormatte}" styleClass="font-bold" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Montant Payé" sortBy="#{cotisation.montantPaye}" style="width:120px">
|
|
<h:outputText value="#{cotisation.montantPayeFormatte}" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Restant" style="width:120px">
|
|
<h:outputText value="#{cotisation.montantRestantFormatte}"
|
|
styleClass="#{cotisation.montantRestant.compareTo(java.math.BigDecimal.ZERO) > 0 ? 'text-orange-500 font-bold' : 'text-green-500'}" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Échéance" sortBy="#{cotisation.dateEcheance}" style="width:120px">
|
|
<h:outputText value="#{cotisation.dateEcheanceFormatee}" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Actions" style="width:200px">
|
|
<div class="flex gap-1">
|
|
<p:commandButton value="Payer"
|
|
icon="pi pi-check"
|
|
styleClass="p-button-success p-button-sm"
|
|
action="#{cotisationsBean.selectionnerCotisation(cotisation)}"
|
|
update=":formPaiement"
|
|
oncomplete="PF('dlgPaiement').show();" />
|
|
<p:commandButton value="Partiel"
|
|
icon="pi pi-minus"
|
|
styleClass="p-button-info p-button-sm"
|
|
action="#{cotisationsBean.selectionnerCotisation(cotisation)}"
|
|
update=":formPaiementPartiel"
|
|
oncomplete="PF('dlgPaiementPartiel').show();" />
|
|
</div>
|
|
</p:column>
|
|
</p:dataTable>
|
|
</h:form>
|
|
</div>
|
|
|
|
<!-- Dialog Paiement Complet -->
|
|
<p:dialog header="Enregistrer un Paiement" widgetVar="dlgPaiement" modal="true" width="500" resizable="false">
|
|
<h:form id="formPaiement">
|
|
<div class="ui-fluid">
|
|
<div class="field">
|
|
<label class="font-medium">Cotisation</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.numeroReference} - #{cotisationsBean.cotisationSelectionnee.nomMembre}</p>
|
|
<p class="text-500 text-sm">Montant dû: #{cotisationsBean.cotisationSelectionnee.montantDuFormatte}</p>
|
|
</div>
|
|
|
|
<ui:include src="/templates/components/forms/form-field-select.xhtml">
|
|
<ui:param name="id" value="methodePaiement" />
|
|
<ui:param name="label" value="Méthode de paiement" />
|
|
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.methodePaiement}" />
|
|
<ui:param name="required" value="true" />
|
|
<ui:define name="items">
|
|
<f:selectItem itemLabel="Wave Money" itemValue="WAVE_MONEY" />
|
|
<f:selectItem itemLabel="Espèces" itemValue="ESPECES" />
|
|
<f:selectItem itemLabel="Virement bancaire" itemValue="VIREMENT" />
|
|
<f:selectItem itemLabel="Chèque" itemValue="CHEQUE" />
|
|
<f:selectItem itemLabel="Orange Money" itemValue="ORANGE_MONEY" />
|
|
<f:selectItem itemLabel="Free Money" itemValue="FREE_MONEY" />
|
|
<f:selectItem itemLabel="Carte bancaire" itemValue="CARTE_BANCAIRE" />
|
|
</ui:define>
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/forms/form-field-text.xhtml">
|
|
<ui:param name="id" value="referencePaiement" />
|
|
<ui:param name="label" value="Référence de paiement" />
|
|
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.referencePaiement}" />
|
|
<ui:param name="placeholder" value="Ex: WAVE-123456789" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/forms/form-field-textarea.xhtml">
|
|
<ui:param name="id" value="observationsPaiement" />
|
|
<ui:param name="label" value="Observations" />
|
|
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.observations}" />
|
|
<ui:param name="rows" value="3" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<div class="flex justify-content-end gap-2 mt-3">
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Annuler" />
|
|
<ui:param name="icon" value="pi pi-times" />
|
|
<ui:param name="onclick" value="PF('dlgPaiement').hide();" />
|
|
<ui:param name="outlined" value="true" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-success.xhtml">
|
|
<ui:param name="value" value="Enregistrer" />
|
|
<ui:param name="icon" value="pi pi-check" />
|
|
<ui:param name="action" value="#{cotisationsBean.marquerCommePaye}" />
|
|
<ui:param name="update" value="@form :formPaiements" />
|
|
<ui:param name="oncomplete" value="PF('dlgPaiement').hide();" />
|
|
</ui:include>
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
<!-- Dialog Paiement Partiel -->
|
|
<p:dialog header="Enregistrer un Paiement Partiel" widgetVar="dlgPaiementPartiel" modal="true" width="500" resizable="false">
|
|
<h:form id="formPaiementPartiel">
|
|
<div class="ui-fluid">
|
|
<div class="field">
|
|
<label class="font-medium">Cotisation</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.numeroReference} - #{cotisationsBean.cotisationSelectionnee.nomMembre}</p>
|
|
<p class="text-500 text-sm">Montant dû: #{cotisationsBean.cotisationSelectionnee.montantDuFormatte}</p>
|
|
<p class="text-500 text-sm">Montant restant: #{cotisationsBean.cotisationSelectionnee.montantRestantFormatte}</p>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<p:outputLabel for="montantPaye" value="Montant à payer (FCFA)" />
|
|
<p:inputNumber id="montantPaye"
|
|
value="#{cotisationsBean.cotisationSelectionnee.montantPaye}"
|
|
symbol=""
|
|
minValue="0"
|
|
maxValue="#{cotisationsBean.cotisationSelectionnee.montantDu}"
|
|
styleClass="w-full" />
|
|
</div>
|
|
|
|
<ui:include src="/templates/components/forms/form-field-select.xhtml">
|
|
<ui:param name="id" value="methodePaiementPartiel" />
|
|
<ui:param name="label" value="Méthode de paiement" />
|
|
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.methodePaiement}" />
|
|
<ui:param name="required" value="true" />
|
|
<ui:define name="items">
|
|
<f:selectItem itemLabel="Wave Money" itemValue="WAVE_MONEY" />
|
|
<f:selectItem itemLabel="Espèces" itemValue="ESPECES" />
|
|
<f:selectItem itemLabel="Virement bancaire" itemValue="VIREMENT" />
|
|
<f:selectItem itemLabel="Chèque" itemValue="CHEQUE" />
|
|
</ui:define>
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/forms/form-field-text.xhtml">
|
|
<ui:param name="id" value="referencePaiementPartiel" />
|
|
<ui:param name="label" value="Référence de paiement" />
|
|
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.referencePaiement}" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<div class="flex justify-content-end gap-2 mt-3">
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Annuler" />
|
|
<ui:param name="icon" value="pi pi-times" />
|
|
<ui:param name="onclick" value="PF('dlgPaiementPartiel').hide();" />
|
|
<ui:param name="outlined" value="true" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-success.xhtml">
|
|
<ui:param name="value" value="Enregistrer" />
|
|
<ui:param name="icon" value="pi pi-check" />
|
|
<ui:param name="action" value="#{cotisationsBean.enregistrerPaiementPartiel(cotisationsBean.cotisationSelectionnee.montantPaye, cotisationsBean.cotisationSelectionnee.methodePaiement, cotisationsBean.cotisationSelectionnee.referencePaiement)}" />
|
|
<ui:param name="update" value="@form :formPaiements" />
|
|
<ui:param name="oncomplete" value="PF('dlgPaiementPartiel').hide();" />
|
|
</ui:include>
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
</ui:define>
|
|
</ui:composition>
|