254 lines
14 KiB
HTML
254 lines
14 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">Historique 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-history text-blue-500" />
|
|
<ui:param name="title" value="Historique des Cotisations" />
|
|
<ui:param name="description" value="Consultation de l'historique complet des cotisations et paiements" />
|
|
<ui:define name="actions">
|
|
<h:form id="formActionsHistorique">
|
|
<div class="flex gap-2">
|
|
<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>
|
|
|
|
<!-- Filtres d'historique -->
|
|
<div class="card">
|
|
<h:form id="formFiltresHistorique">
|
|
<h5>Filtres de Recherche</h5>
|
|
<div class="grid">
|
|
<div class="col-12 md:col-3">
|
|
<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-3">
|
|
<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 class="col-12 md:col-3">
|
|
<ui:include src="/templates/components/forms/form-field-select.xhtml">
|
|
<ui:param name="id" value="statutHistorique" />
|
|
<ui:param name="label" value="Statut" />
|
|
<ui:param name="value" value="#{cotisationsBean.filtres.statut}" />
|
|
<ui:define name="items">
|
|
<f:selectItem itemLabel="Tous" itemValue="" />
|
|
<f:selectItem itemLabel="Payée" itemValue="PAYEE" />
|
|
<f:selectItem itemLabel="Partiellement payée" itemValue="PARTIELLEMENT_PAYEE" />
|
|
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
|
|
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
|
|
<f:selectItem itemLabel="Annulée" itemValue="ANNULEE" />
|
|
</ui:define>
|
|
</ui:include>
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div class="field">
|
|
<p:outputLabel />
|
|
<div class="flex gap-2">
|
|
<ui:include src="/templates/components/buttons/button-primary.xhtml">
|
|
<ui:param name="value" value="Rechercher" />
|
|
<ui:param name="icon" value="pi pi-search" />
|
|
<ui:param name="action" value="#{cotisationsBean.rechercher}" />
|
|
<ui:param name="update" value=":formHistorique" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Réinitialiser" />
|
|
<ui:param name="icon" value="pi pi-times" />
|
|
<ui:param name="action" value="#{cotisationsBean.reinitialiserFiltres}" />
|
|
<ui:param name="update" value="@form :formHistorique" />
|
|
<ui:param name="outlined" value="true" />
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
|
|
<!-- Tableau d'historique -->
|
|
<div class="card">
|
|
<h:form id="formHistorique">
|
|
<h5>Historique des Cotisations</h5>
|
|
|
|
<p:dataTable id="dtHistorique"
|
|
value="#{cotisationsBean.cotisationsFiltrees}"
|
|
var="cotisation"
|
|
paginator="true"
|
|
rows="20"
|
|
rowsPerPageTemplate="10,20,50,100"
|
|
sortMode="multiple"
|
|
emptyMessage="Aucune cotisation trouvée">
|
|
|
|
<f:facet name="header">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<span>Historique (#{cotisationsBean.cotisationsFiltrees.size()} cotisation(s))</span>
|
|
</div>
|
|
</f:facet>
|
|
|
|
<p:column headerText="Date" sortBy="#{cotisation.dateCreation}" style="width:120px">
|
|
<h:outputText value="#{cotisation.dateCreation}" rendered="#{cotisation.dateCreation != null}">
|
|
<f:convertDateTime pattern="dd/MM/yyyy" />
|
|
</h:outputText>
|
|
</p:column>
|
|
|
|
<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>
|
|
<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="Statut" sortBy="#{cotisation.statut}" style="width:150px">
|
|
<p:tag value="#{cotisation.statutLibelle}"
|
|
severity="#{cotisation.statutSeverity}"
|
|
icon="#{cotisation.statutIcon}" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Date Paiement" sortBy="#{cotisation.datePaiement}" style="width:150px">
|
|
<h:outputText value="#{cotisation.datePaiementFormatee}" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Méthode" style="width:120px">
|
|
<h:outputText value="#{cotisation.methodePaiementLibelle}" rendered="#{cotisation.methodePaiement != null}" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Actions" style="width:100px">
|
|
<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();" />
|
|
</p:column>
|
|
</p:dataTable>
|
|
</h:form>
|
|
</div>
|
|
|
|
<!-- 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">
|
|
<div class="field">
|
|
<label class="font-medium">Membre</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.nomMembre}</p>
|
|
<p class="text-500 text-sm">N° #{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">Date d'échéance</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.dateEcheanceFormatee}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-4">
|
|
<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-4">
|
|
<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-4">
|
|
<div class="field">
|
|
<label class="font-medium">Montant restant</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.montantRestantFormatte}</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 class="col-12 md:col-6">
|
|
<div class="field">
|
|
<label class="font-medium">Méthode de paiement</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.methodePaiementLibelle}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12" rendered="#{cotisationsBean.cotisationSelectionnee.observations != null}">
|
|
<div class="field">
|
|
<label class="font-medium">Observations</label>
|
|
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.observations}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
</ui:define>
|
|
</ui:composition>
|