457 lines
28 KiB
HTML
457 lines
28 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">Gestion des 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-money-bill text-green-500" />
|
|
<ui:param name="title" value="Gestion des Cotisations" />
|
|
<ui:param name="description" value="Suivi et gestion des cotisations des membres" />
|
|
<ui:define name="actions">
|
|
<h:form id="formActionsCotisations">
|
|
<div class="flex gap-2">
|
|
<ui:include src="/templates/components/buttons/button-success.xhtml">
|
|
<ui:param name="value" value="Nouvelle cotisation" />
|
|
<ui:param name="icon" value="pi pi-plus" />
|
|
<ui:param name="onclick" value="PF('dlgNouvelleCotisation').show();" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Exporter" />
|
|
<ui:param name="icon" value="pi pi-download" />
|
|
<ui:param name="action" value="#{cotisationsBean.exporterCotisations}" />
|
|
<ui:param name="outlined" value="true" />
|
|
</ui:include>
|
|
<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 -->
|
|
<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.tauxRecouvrementInt}%" />
|
|
<ui:param name="label" value="Taux de Recouvrement" />
|
|
<ui:param name="icon" value="pi pi-percentage" />
|
|
<ui:param name="bgColor" value="blue" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
|
<ui:param name="value" value="#{cotisationsBean.statistiques.cotisationsEnRetard}" />
|
|
<ui:param name="label" value="En Retard" />
|
|
<ui:param name="icon" value="pi pi-exclamation-triangle" />
|
|
<ui:param name="bgColor" value="orange" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/cards/stat-card.xhtml">
|
|
<ui:param name="value" value="#{cotisationsBean.statistiques.montantRetardFormatte}" />
|
|
<ui:param name="label" value="Montant Retard" />
|
|
<ui:param name="icon" value="pi pi-clock" />
|
|
<ui:param name="bgColor" value="purple" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<!-- Liste des cotisations -->
|
|
<div class="card">
|
|
<h:form id="formCotisations">
|
|
<h5>Liste des Cotisations</h5>
|
|
|
|
<!-- Filtres et recherche (DRY/WOU: filter-bar) -->
|
|
<ui:decorate template="/templates/components/cards/filter-bar.xhtml">
|
|
<ui:param name="title" value="Filtres" />
|
|
<ui:param name="styleClass" value="mb-3" />
|
|
<ui:define name="filters">
|
|
<div class="col-12 md:col-4">
|
|
<div class="field">
|
|
<p:outputLabel for="searchMembre" value="Rechercher" />
|
|
<span class="p-input-icon-left w-full">
|
|
<i class="pi pi-search"></i>
|
|
<p:inputText id="searchMembre"
|
|
placeholder="Rechercher par membre..."
|
|
value="#{cotisationsBean.filtres.nomMembre}"
|
|
styleClass="w-full">
|
|
<p:ajax event="keyup" update="dtCotisations" delay="500"/>
|
|
</p:inputText>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-2">
|
|
<div class="field">
|
|
<p:outputLabel for="filtreStatut" value="Statut" />
|
|
<p:selectOneMenu id="filtreStatut"
|
|
value="#{cotisationsBean.filtres.statut}"
|
|
styleClass="w-full">
|
|
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
|
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
|
|
<f:selectItem itemLabel="Payée" itemValue="PAYEE" />
|
|
<f:selectItem itemLabel="Partiellement payée" itemValue="PARTIELLEMENT_PAYEE" />
|
|
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
|
|
<f:selectItem itemLabel="Annulée" itemValue="ANNULEE" />
|
|
<p:ajax event="change" update="dtCotisations" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-2">
|
|
<div class="field">
|
|
<p:outputLabel for="filtreType" value="Type" />
|
|
<p:selectOneMenu id="filtreType"
|
|
value="#{cotisationsBean.filtres.typeCotisation}"
|
|
styleClass="w-full">
|
|
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
|
<f:selectItem itemLabel="Mensuelle" itemValue="MENSUELLE" />
|
|
<f:selectItem itemLabel="Trimestrielle" itemValue="TRIMESTRIELLE" />
|
|
<f:selectItem itemLabel="Semestrielle" itemValue="SEMESTRIELLE" />
|
|
<f:selectItem itemLabel="Annuelle" itemValue="ANNUELLE" />
|
|
<f:selectItem itemLabel="Adhésion" itemValue="ADHESION" />
|
|
<f:selectItem itemLabel="Exceptionnelle" itemValue="EXCEPTIONNELLE" />
|
|
<p:ajax event="change" update="dtCotisations" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
</div>
|
|
</ui:define>
|
|
<ui:define name="actions">
|
|
<div class="col-12 md:col-2">
|
|
<div class="field">
|
|
<label class="invisible">Actions</label>
|
|
<p:commandButton value="Filtres avancés"
|
|
icon="pi pi-filter"
|
|
onclick="PF('dlgFiltresAvances').show();"
|
|
styleClass="ui-button-secondary w-full" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-2">
|
|
<div class="field">
|
|
<label class="invisible">Réinitialiser</label>
|
|
<p:commandButton value="Réinitialiser"
|
|
icon="pi pi-filter-slash"
|
|
action="#{cotisationsBean.reinitialiserFiltres}"
|
|
update="dtCotisations searchMembre filtreStatut filtreType"
|
|
styleClass="ui-button-secondary w-full" />
|
|
</div>
|
|
</div>
|
|
</ui:define>
|
|
</ui:decorate>
|
|
|
|
<!-- Tableau des cotisations -->
|
|
<p:dataTable id="dtCotisations"
|
|
value="#{cotisationsBean.cotisationsFiltrees}"
|
|
var="cotisation"
|
|
paginator="true"
|
|
rows="20"
|
|
rowsPerPageTemplate="10,20,50,100"
|
|
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
|
|
currentPageReportTemplate="{startRecord} - {endRecord} sur {totalRecords}"
|
|
emptyMessage="Aucune cotisation trouvée"
|
|
selection="#{cotisationsBean.cotisationsSelectionnees}"
|
|
selectionMode="multiple">
|
|
|
|
<f:facet name="header">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<span>Cotisations (#{cotisationsBean.cotisationsFiltrees.size()})</span>
|
|
<div class="flex gap-2">
|
|
<ui:include src="/templates/components/buttons/button-warning.xhtml">
|
|
<ui:param name="value" value="Rappels groupés" />
|
|
<ui:param name="icon" value="pi pi-send" />
|
|
<ui:param name="action" value="#{cotisationsBean.envoyerRappelsGroupes}" />
|
|
<ui:param name="update" value="@form" />
|
|
<ui:param name="disabled" value="#{empty cotisationsBean.cotisationsSelectionnees}" />
|
|
<ui:param name="outlined" value="true" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
</f:facet>
|
|
|
|
<p:column selectionMode="multiple" style="width:50px" />
|
|
|
|
<p:column headerText="Référence" sortBy="#{cotisation.numeroReference}" style="width:150px">
|
|
<h:outputText value="#{cotisation.numeroReference}" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Membre" sortBy="#{cotisation.nomMembre}">
|
|
<div class="flex align-items-center gap-2">
|
|
<div>
|
|
<div class="font-medium">#{cotisation.nomMembre}</div>
|
|
<div class="text-600 text-sm">#{cotisation.numeroMembre}</div>
|
|
</div>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Type" sortBy="#{cotisation.typeCotisation}" style="width:120px">
|
|
<p:tag value="#{cotisation.typeCotisationLibelle}"
|
|
severity="info"
|
|
icon="#{cotisation.typeCotisation == 'ADHESION' ? 'pi-user-plus' : 'pi-calendar'}" />
|
|
</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="Statut" sortBy="#{cotisation.statut}" style="width:150px">
|
|
<p:tag value="#{cotisation.statutLibelle}"
|
|
severity="#{cotisation.statutSeverity}"
|
|
icon="#{cotisation.statutIcon}" />
|
|
</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 icon="pi pi-check"
|
|
title="Marquer comme payée"
|
|
styleClass="p-button-rounded p-button-text p-button-success"
|
|
disabled="#{cotisation.statut == 'PAYEE'}"
|
|
action="#{cotisationsBean.marquerCommePaye(cotisation)}"
|
|
update="@form" />
|
|
<p:commandButton icon="pi pi-send"
|
|
title="Envoyer un rappel"
|
|
styleClass="p-button-rounded p-button-text p-button-warning"
|
|
action="#{cotisationsBean.envoyerRappel(cotisation)}"
|
|
update="@form" />
|
|
<p:commandButton icon="pi pi-eye"
|
|
title="Voir les détails"
|
|
styleClass="p-button-rounded p-button-text p-button-info"
|
|
action="#{cotisationsBean.selectionnerCotisation(cotisation)}"
|
|
update=":formDetailsCotisation"
|
|
oncomplete="PF('dlgDetailsCotisation').show();" />
|
|
</div>
|
|
</p:column>
|
|
</p:dataTable>
|
|
</h:form>
|
|
</div>
|
|
|
|
<!-- Dialog Nouvelle Cotisation -->
|
|
<p:dialog header="Nouvelle Cotisation" widgetVar="dlgNouvelleCotisation" modal="true" width="600" resizable="false">
|
|
<h:form id="formNouvelleCotisation">
|
|
<ui:include src="/templates/components/forms/form-section.xhtml">
|
|
<ui:define name="title">Informations de la cotisation</ui:define>
|
|
<ui:define name="content">
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<ui:include src="/templates/components/forms/form-field-text.xhtml">
|
|
<ui:param name="id" value="libelle" />
|
|
<ui:param name="label" value="Libellé" />
|
|
<ui:param name="value" value="#{cotisationsBean.nouvelleCotisation.libelle}" />
|
|
<ui:param name="required" value="true" />
|
|
<ui:param name="placeholder" value="Ex: Cotisation mensuelle janvier 2024" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6">
|
|
<ui:include src="/templates/components/forms/form-field-select.xhtml">
|
|
<ui:param name="id" value="typeCotisation" />
|
|
<ui:param name="label" value="Type de cotisation" />
|
|
<ui:param name="value" value="#{cotisationsBean.nouvelleCotisation.typeCotisation}" />
|
|
<ui:param name="required" value="true" />
|
|
<ui:define name="items">
|
|
<f:selectItem itemLabel="Mensuelle" itemValue="MENSUELLE" />
|
|
<f:selectItem itemLabel="Trimestrielle" itemValue="TRIMESTRIELLE" />
|
|
<f:selectItem itemLabel="Semestrielle" itemValue="SEMESTRIELLE" />
|
|
<f:selectItem itemLabel="Annuelle" itemValue="ANNUELLE" />
|
|
<f:selectItem itemLabel="Adhésion" itemValue="ADHESION" />
|
|
<f:selectItem itemLabel="Exceptionnelle" itemValue="EXCEPTIONNELLE" />
|
|
</ui:define>
|
|
</ui:include>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6">
|
|
<ui:include src="/templates/components/forms/form-field-calendar.xhtml">
|
|
<ui:param name="id" value="dateEcheance" />
|
|
<ui:param name="label" value="Date d'échéance" />
|
|
<ui:param name="value" value="#{cotisationsBean.nouvelleCotisation.dateEcheance}" />
|
|
<ui:param name="required" value="true" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<p:outputLabel for="montantDu" value="Montant dû (FCFA)" />
|
|
<p:inputNumber id="montantDu"
|
|
value="#{cotisationsBean.nouvelleCotisation.montantDu}"
|
|
symbol=""
|
|
minValue="0"
|
|
styleClass="w-full" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<ui:include src="/templates/components/forms/form-field-textarea.xhtml">
|
|
<ui:param name="id" value="observations" />
|
|
<ui:param name="label" value="Observations" />
|
|
<ui:param name="value" value="#{cotisationsBean.nouvelleCotisation.observations}" />
|
|
<ui:param name="rows" value="3" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
</ui:define>
|
|
</ui:include>
|
|
|
|
<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('dlgNouvelleCotisation').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.enregistrerCotisation}" />
|
|
<ui:param name="update" value="@form :formCotisations" />
|
|
<ui:param name="oncomplete" value="PF('dlgNouvelleCotisation').hide();" />
|
|
</ui:include>
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
<!-- Dialog Filtres Avancés -->
|
|
<p:dialog header="Filtres Avancés" widgetVar="dlgFiltresAvances" modal="true" width="500" resizable="false">
|
|
<h:form id="formFiltresAvances">
|
|
<div class="ui-fluid">
|
|
<ui:include src="/templates/components/forms/form-field-text.xhtml">
|
|
<ui:param name="id" value="club" />
|
|
<ui:param name="label" value="Club/Association" />
|
|
<ui:param name="value" value="#{cotisationsBean.filtres.club}" />
|
|
<ui:param name="placeholder" value="Rechercher par club..." />
|
|
</ui:include>
|
|
|
|
<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.filtres.methodePaiement}" />
|
|
<ui:define name="items">
|
|
<f:selectItem itemLabel="Toutes" itemValue="" />
|
|
<f:selectItem itemLabel="Wave Money" itemValue="WAVE_MONEY" />
|
|
<f:selectItem itemLabel="Espèces" itemValue="ESPECES" />
|
|
<f:selectItem itemLabel="Virement" itemValue="VIREMENT" />
|
|
<f:selectItem itemLabel="Chèque" itemValue="CHEQUE" />
|
|
</ui:define>
|
|
</ui:include>
|
|
|
|
<div class="grid">
|
|
<div class="col-12 md:col-6">
|
|
<ui:include src="/templates/components/forms/form-field-calendar.xhtml">
|
|
<ui:param name="id" value="dateDebut" />
|
|
<ui:param name="label" value="Date début" />
|
|
<ui:param name="value" value="#{cotisationsBean.filtres.dateDebut}" />
|
|
</ui:include>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<ui:include src="/templates/components/forms/form-field-calendar.xhtml">
|
|
<ui:param name="id" value="dateFin" />
|
|
<ui:param name="label" value="Date fin" />
|
|
<ui:param name="value" value="#{cotisationsBean.filtres.dateFin}" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
</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('dlgFiltresAvances').hide();" />
|
|
<ui:param name="outlined" value="true" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
|
<ui:param name="value" value="Appliquer" />
|
|
<ui:param name="icon" value="pi pi-check" />
|
|
<ui:param name="action" value="#{cotisationsBean.rechercher}" />
|
|
<ui:param name="update" value=":formCotisations" />
|
|
<ui:param name="oncomplete" value="PF('dlgFiltresAvances').hide();" />
|
|
</ui:include>
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
<!-- Dialog Détails Cotisation -->
|
|
<p:dialog header="Détails de la Cotisation" widgetVar="dlgDetailsCotisation" modal="true" width="600" resizable="false">
|
|
<h:form id="formDetailsCotisation">
|
|
<div class="ui-fluid">
|
|
<div class="grid">
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-medium">Référence</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.numeroReference}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-medium">Statut</label>
|
|
<p:tag value="#{cotisationsBean.cotisationSelectionnee.statutLibelle}"
|
|
severity="#{cotisationsBean.cotisationSelectionnee.statutSeverity}" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-medium">Membre</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.nomMembre}</p>
|
|
<p class="text-500 text-sm">#{cotisationsBean.cotisationSelectionnee.numeroMembre}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-medium">Type</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.typeCotisationLibelle}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-medium">Montant dû</label>
|
|
<p class="text-600 font-bold">#{cotisationsBean.cotisationSelectionnee.montantDuFormatte}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-medium">Montant payé</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.montantPayeFormatte}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-medium">Date d'échéance</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.dateEcheanceFormatee}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-medium">Date de paiement</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.datePaiementFormatee}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
</ui:define>
|
|
</ui:composition>
|