199 lines
11 KiB
HTML
199 lines
11 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">
|
|
|
|
<f:metadata>
|
|
<f:viewParam name="id" value="#{membreCotisationBean.membreId}"/>
|
|
<f:event type="preRenderView" listener="#{membreCotisationBean.init}"/>
|
|
</f:metadata>
|
|
|
|
<ui:param name="page" value="#{membreCotisationBean}"/>
|
|
<ui:define name="title">Cotisations du Membre - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<h:form id="formCotisations">
|
|
<p:messages id="messages" showDetail="true" closable="true"/>
|
|
|
|
<!-- En-tête -->
|
|
<div class="card mb-3">
|
|
<div class="flex justify-content-between align-items-center flex-column md:flex-row">
|
|
<div>
|
|
<h3 class="m-0">
|
|
<i class="pi pi-dollar text-green-500 mr-2"></i>
|
|
Cotisations du Membre
|
|
</h3>
|
|
<p class="text-600 m-0 mt-2">
|
|
Membre: #{membreCotisationBean.numeroMembre} •
|
|
Statut: #{membreCotisationBean.statutCotisations}
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-2 mt-2 md:mt-0">
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="Retour au profil"/>
|
|
<ui:param name="icon" value="pi pi-arrow-left"/>
|
|
<ui:param name="outcome" value="membreProfilPage"/>
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Résumé cotisations -->
|
|
<div class="grid mb-3">
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Payées" />
|
|
<ui:param name="value" value="#{membreCotisationBean.cotisationsPayees}" />
|
|
<ui:param name="icon" value="pi-check" />
|
|
<ui:param name="iconColor" value="green-600" />
|
|
<ui:param name="showGrowth" value="false" />
|
|
<ui:param name="showProgress" value="false" />
|
|
<ui:param name="colSize" value="col-12 md:col-3" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="En Attente" />
|
|
<ui:param name="value" value="#{membreCotisationBean.cotisationsEnAttente}" />
|
|
<ui:param name="icon" value="pi-clock" />
|
|
<ui:param name="iconColor" value="orange-600" />
|
|
<ui:param name="showGrowth" value="false" />
|
|
<ui:param name="showProgress" value="false" />
|
|
<ui:param name="colSize" value="col-12 md:col-3" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Montant Dû" />
|
|
<ui:param name="value" value="#{membreCotisationBean.montantDu}" />
|
|
<ui:param name="icon" value="pi-exclamation-triangle" />
|
|
<ui:param name="iconColor" value="red-600" />
|
|
<ui:param name="showGrowth" value="false" />
|
|
<ui:param name="showProgress" value="false" />
|
|
<ui:param name="colSize" value="col-12 md:col-3" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Total Versé" />
|
|
<ui:param name="value" value="#{membreCotisationBean.totalVerse}" />
|
|
<ui:param name="icon" value="pi-dollar" />
|
|
<ui:param name="iconColor" value="blue-600" />
|
|
<ui:param name="showGrowth" value="false" />
|
|
<ui:param name="showProgress" value="false" />
|
|
<ui:param name="colSize" value="col-12 md:col-3" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<!-- Liste des cotisations -->
|
|
<div class="card">
|
|
<h5 class="mb-3">Historique des 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 event="change" 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 event="change" update="dtCotisations"/>
|
|
</p:selectOneMenu>
|
|
</div>
|
|
</p:toolbarGroup>
|
|
<p:toolbarGroup align="right">
|
|
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
|
<ui:param name="value" value="" />
|
|
<ui:param name="icon" value="pi pi-refresh" />
|
|
<ui:param name="action" value="#{membreCotisationBean.actualiser}" />
|
|
<ui:param name="update" value=":formCotisations:dtCotisations" />
|
|
<ui:param name="title" value="Actualiser" />
|
|
<ui:param name="outlined" value="true" />
|
|
</ui:include>
|
|
</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="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' and cotisation.statut != 'PAYEE'}"/>
|
|
<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' or cotisation.statut == 'PAYEE'}"/>
|
|
</div>
|
|
</p:column>
|
|
</p:dataTable>
|
|
</div>
|
|
</h:form>
|
|
</ui:define>
|
|
</ui:composition>
|
|
|