725 lines
46 KiB
HTML
725 lines
46 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">Gestion des Cotisations - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<div class="ui-fluid">
|
|
<!-- En-tête principal avec disposition Freya stricte -->
|
|
<div class="card">
|
|
<div class="formgrid grid">
|
|
<div class="field col-12 lg:col-8">
|
|
<h2 class="text-primary font-bold mb-2">
|
|
<i class="pi pi-dollar mr-2"></i>
|
|
Gestion des Cotisations
|
|
</h2>
|
|
<p class="text-600 mt-0">
|
|
<span class="font-semibold">127 organisations</span> •
|
|
<span class="font-semibold">#{cotisationsGestionBean.periodeActuelle}</span> •
|
|
Recouvrement: <span class="font-semibold text-green-600">#{cotisationsGestionBean.tauxRecouvrement}%</span> •
|
|
<span class="font-semibold">#{cotisationsGestionBean.totalMembresActifs}</span> membres actifs
|
|
</p>
|
|
</div>
|
|
<div class="field col-12 lg:col-4 text-right">
|
|
<h:form id="formActionsGlobales">
|
|
<p:commandButton icon="pi pi-megaphone"
|
|
title="Nouvelle Campagne"
|
|
styleClass="ui-button-success ui-button-sm mr-3"
|
|
onclick="PF('dlgNouvelleCampagne').show();" />
|
|
<p:commandButton icon="pi pi-send"
|
|
title="Relances groupées"
|
|
styleClass="ui-button-warning ui-button-outlined ui-button-sm mr-3"
|
|
action="#{cotisationsGestionBean.relancesGroupees}" />
|
|
<p:commandButton icon="pi pi-file-excel"
|
|
title="Export global"
|
|
styleClass="ui-button-info ui-button-outlined ui-button-sm"
|
|
action="#{cotisationsGestionBean.exporterTout}" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPIs Financiers avec grille Freya stricte -->
|
|
<div class="formgrid grid">
|
|
<!-- KPI 1: Montant Collecté -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Collecté ce mois" />
|
|
<ui:param name="value" value="#{cotisationsGestionBean.montantCollecte}" />
|
|
<ui:param name="icon" value="pi-check" />
|
|
<ui:param name="iconColor" value="green-600" />
|
|
<ui:param name="growthValue" value="#{cotisationsGestionBean.progressionMensuelle}" />
|
|
<ui:param name="growthLabel" value="de l'objectif" />
|
|
<ui:param name="progressValue" value="#{cotisationsGestionBean.progressionMensuelle}" />
|
|
<ui:param name="colSize" value="col-12 md:col-6 lg:col-3 xl:col-2" />
|
|
</ui:include>
|
|
|
|
<!-- KPI 2: Membres à jour -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Membres à jour" />
|
|
<ui:param name="value" value="#{cotisationsGestionBean.membresAJour}" />
|
|
<ui:param name="icon" value="pi-users" />
|
|
<ui:param name="iconColor" value="blue-600" />
|
|
<ui:param name="statusIcon" value="pi-circle-fill" />
|
|
<ui:param name="statusLabel" value="Conformes" />
|
|
<ui:param name="statusValue" value="#{cotisationsGestionBean.pourcentageMembresAJour}%" />
|
|
<ui:param name="progressValue" value="#{cotisationsGestionBean.pourcentageMembresAJour}" />
|
|
<ui:param name="colSize" value="col-12 md:col-6 lg:col-3 xl:col-2" />
|
|
</ui:include>
|
|
|
|
<!-- KPI 3: En Attente -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="En attente" />
|
|
<ui:param name="value" value="#{cotisationsGestionBean.montantEnAttente}" />
|
|
<ui:param name="icon" value="pi-clock" />
|
|
<ui:param name="iconColor" value="orange-600" />
|
|
<ui:param name="statusIcon" value="pi-exclamation-triangle" />
|
|
<ui:param name="statusLabel" value="Cotisations" />
|
|
<ui:param name="statusValue" value="#{cotisationsGestionBean.nombreCotisationsEnAttente}" />
|
|
<ui:param name="noDataLabel" value="À traiter rapidement" />
|
|
<ui:param name="colSize" value="col-12 md:col-6 lg:col-3 xl:col-2" />
|
|
<ui:param name="showProgress" value="false" />
|
|
</ui:include>
|
|
|
|
<!-- KPI 4: Impayés -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Impayés" />
|
|
<ui:param name="value" value="#{cotisationsGestionBean.montantImpayes}" />
|
|
<ui:param name="icon" value="pi-exclamation-circle" />
|
|
<ui:param name="iconColor" value="red-600" />
|
|
<ui:param name="statusIcon" value="pi-arrow-down" />
|
|
<ui:param name="statusLabel" value="Retard moyen" />
|
|
<ui:param name="statusValue" value="#{cotisationsGestionBean.joursRetardMoyen}j" />
|
|
<ui:param name="noDataLabel" value="Action requise" />
|
|
<ui:param name="colSize" value="col-12 md:col-6 lg:col-3 xl:col-2" />
|
|
<ui:param name="showProgress" value="false" />
|
|
</ui:include>
|
|
|
|
<!-- KPI 5: Revenus 2024 -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Revenus 2024" />
|
|
<ui:param name="value" value="#{cotisationsGestionBean.revenus2024}" />
|
|
<ui:param name="icon" value="pi-chart-line" />
|
|
<ui:param name="iconColor" value="purple-600" />
|
|
<ui:param name="growthValue" value="#{cotisationsGestionBean.croissanceAnnuelle}" />
|
|
<ui:param name="growthLabel" value="Croissance annuelle" />
|
|
<ui:param name="colSize" value="col-12 md:col-6 lg:col-3 xl:col-2" />
|
|
<ui:param name="showProgress" value="false" />
|
|
</ui:include>
|
|
|
|
<!-- KPI 6: Wave Money -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Prélèvements Auto" />
|
|
<ui:param name="value" value="#{cotisationsGestionBean.prelevementsActifs}" />
|
|
<ui:param name="icon" value="pi-mobile" />
|
|
<ui:param name="iconColor" value="teal-600" />
|
|
<ui:param name="statusIcon" value="pi-sync" />
|
|
<ui:param name="statusLabel" value="Montant/mois" />
|
|
<ui:param name="statusValue" value="#{cotisationsGestionBean.montantPrelevementsPrevu} FCFA" />
|
|
<ui:param name="noDataLabel" value="Automatique" />
|
|
<ui:param name="colSize" value="col-12 md:col-6 lg:col-3 xl:col-2" />
|
|
<ui:param name="showProgress" value="false" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<!-- Section Analytics avec disposition Freya -->
|
|
<div class="formgrid grid">
|
|
<!-- Top Organisations -->
|
|
<div class="field col-12 lg:col-8">
|
|
<div class="card">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<h5 class="m-0">
|
|
<i class="pi pi-trophy text-yellow-500 mr-2"></i>
|
|
Top 5 Organisations Performantes
|
|
</h5>
|
|
<p:selectOneMenu value="#{cotisationsGestionBean.periodeGraphique}" styleClass="w-8rem">
|
|
<f:selectItem itemLabel="12 mois" itemValue="12M" />
|
|
<f:selectItem itemLabel="6 mois" itemValue="6M" />
|
|
<f:selectItem itemLabel="3 mois" itemValue="3M" />
|
|
<f:selectItem itemLabel="Ce mois" itemValue="1M" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<p:dataTable value="#{cotisationsGestionBean.topOrganisations}" var="org"
|
|
styleClass="p-datatable-sm p-datatable-gridlines">
|
|
<p:column headerText="Organisation" style="width:40%">
|
|
<div class="flex align-items-center">
|
|
<div class="flex align-items-center justify-content-center bg-primary-100 border-round mr-2"
|
|
style="width: 2rem; height: 2rem;">
|
|
<i class="pi pi-building text-primary-600"></i>
|
|
</div>
|
|
<span class="font-semibold">#{org.nom}</span>
|
|
</div>
|
|
</p:column>
|
|
<p:column headerText="Taux" style="width:15%; text-align: center;">
|
|
<p:progressBar value="#{org.tauxRecouvrement}"
|
|
labelTemplate="#{org.tauxRecouvrement}%"
|
|
styleClass="h-1rem" />
|
|
</p:column>
|
|
<p:column headerText="Montant" style="width:20%; text-align: right;">
|
|
<span class="font-bold text-green-600">#{org.montantCollecte} FCFA</span>
|
|
</p:column>
|
|
<p:column headerText="Membres" style="width:25%; text-align: center;">
|
|
<p:tag value="#{org.nombreMembresAJour}/#{org.totalMembres}"
|
|
severity="info" styleClass="text-xs" />
|
|
</p:column>
|
|
</p:dataTable>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Répartition Paiements -->
|
|
<div class="field col-12 lg:col-4">
|
|
<div class="card">
|
|
<h5 class="mb-3">
|
|
<i class="pi pi-chart-pie text-blue-500 mr-2"></i>
|
|
Méthodes de Paiement
|
|
</h5>
|
|
|
|
<div class="surface-50 border-round-lg p-3 mb-2">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<div class="flex align-items-center">
|
|
<i class="pi pi-mobile text-blue-500 mr-2"></i>
|
|
<span class="font-medium">Wave Money</span>
|
|
</div>
|
|
<span class="font-bold">#{cotisationsGestionBean.paiementsWave}%</span>
|
|
</div>
|
|
<p:progressBar value="#{cotisationsGestionBean.paiementsWave}"
|
|
showValue="false"
|
|
styleClass="h-05rem" />
|
|
</div>
|
|
|
|
<div class="surface-50 border-round-lg p-3 mb-2">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<div class="flex align-items-center">
|
|
<i class="pi pi-building text-purple-500 mr-2"></i>
|
|
<span class="font-medium">Virement</span>
|
|
</div>
|
|
<span class="font-bold">#{cotisationsGestionBean.paiementsVirement}%</span>
|
|
</div>
|
|
<p:progressBar value="#{cotisationsGestionBean.paiementsVirement}"
|
|
showValue="false"
|
|
styleClass="h-05rem" />
|
|
</div>
|
|
|
|
<div class="surface-50 border-round-lg p-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<div class="flex align-items-center">
|
|
<i class="pi pi-money-bill text-green-500 mr-2"></i>
|
|
<span class="font-medium">Espèces</span>
|
|
</div>
|
|
<span class="font-bold">#{cotisationsGestionBean.paiementsEspeces}%</span>
|
|
</div>
|
|
<p:progressBar value="#{cotisationsGestionBean.paiementsEspeces}"
|
|
showValue="false"
|
|
styleClass="h-05rem" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section Filtrage avec structure Freya -->
|
|
<div class="card">
|
|
<h:form id="formFiltres">
|
|
<div class="formgrid grid">
|
|
<!-- Filtres principaux -->
|
|
<div class="field col-12 md:col-6 lg:col-3">
|
|
<label for="filtreOrganisation" class="block text-900 font-medium mb-2">Organisation</label>
|
|
<p:selectOneMenu id="filtreOrganisation"
|
|
value="#{cotisationsGestionBean.filtres.organisation}"
|
|
filter="true" filterMatchMode="contains"
|
|
styleClass="w-full">
|
|
<f:selectItem itemLabel="Toutes les organisations" itemValue="" />
|
|
<f:selectItems value="#{cotisationsGestionBean.listeOrganisations}"
|
|
var="org"
|
|
itemLabel="#{org.nom}"
|
|
itemValue="#{org.id}" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6 lg:col-2">
|
|
<label for="filtrePeriode" class="block text-900 font-medium mb-2">Période</label>
|
|
<p:selectOneMenu id="filtrePeriode"
|
|
value="#{cotisationsGestionBean.filtres.periode}"
|
|
styleClass="w-full">
|
|
<f:selectItem itemLabel="Ce mois" itemValue="MOIS" />
|
|
<f:selectItem itemLabel="3 derniers mois" itemValue="TRIMESTRE" />
|
|
<f:selectItem itemLabel="6 derniers mois" itemValue="SEMESTRE" />
|
|
<f:selectItem itemLabel="Cette année" itemValue="ANNEE" />
|
|
<f:selectItem itemLabel="Toutes" itemValue="TOUTES" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6 lg:col-2">
|
|
<label for="filtreStatut" class="block text-900 font-medium mb-2">Statut</label>
|
|
<p:selectOneMenu id="filtreStatut"
|
|
value="#{cotisationsGestionBean.filtres.statut}"
|
|
styleClass="w-full">
|
|
<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" />
|
|
<f:selectItem itemLabel="Annulées" itemValue="ANNULE" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6 lg:col-2">
|
|
<label for="filtreType" class="block text-900 font-medium mb-2">Type</label>
|
|
<p:selectOneMenu id="filtreType"
|
|
value="#{cotisationsGestionBean.filtres.type}"
|
|
styleClass="w-full">
|
|
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
|
<f:selectItem itemLabel="Mensuelle" itemValue="MENSUELLE" />
|
|
<f:selectItem itemLabel="Spéciale" itemValue="SPECIALE" />
|
|
<f:selectItem itemLabel="Adhésion" itemValue="ADHESION" />
|
|
<f:selectItem itemLabel="Événement" itemValue="EVENEMENT" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field col-12 lg:col-3">
|
|
<label for="recherche" class="block text-900 font-medium mb-2">Recherche</label>
|
|
<span class="p-input-icon-left w-full">
|
|
<i class="pi pi-search"></i>
|
|
<p:inputText id="recherche"
|
|
value="#{cotisationsGestionBean.filtres.recherche}"
|
|
placeholder="Membre, numéro, référence..."
|
|
styleClass="w-full">
|
|
<p:ajax event="keyup" delay="300"
|
|
update=":formTableCotisations:dtCotisations"
|
|
listener="#{cotisationsGestionBean.appliquerFiltres}" />
|
|
</p:inputText>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtres avancés -->
|
|
<p:panel header="Filtres Avancés (Business Intelligence)"
|
|
toggleable="true"
|
|
collapsed="true"
|
|
styleClass="mt-3">
|
|
<div class="formgrid grid mt-3">
|
|
<div class="field col-12 md:col-6 lg:col-3">
|
|
<label for="filtreMontantMin" class="block text-900 font-medium mb-2">Montant minimum</label>
|
|
<p:inputNumber id="filtreMontantMin"
|
|
value="#{cotisationsGestionBean.filtres.montantMin}"
|
|
suffix=" FCFA"
|
|
styleClass="w-full" />
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6 lg:col-3">
|
|
<label for="filtreMontantMax" class="block text-900 font-medium mb-2">Montant maximum</label>
|
|
<p:inputNumber id="filtreMontantMax"
|
|
value="#{cotisationsGestionBean.filtres.montantMax}"
|
|
suffix=" FCFA"
|
|
styleClass="w-full" />
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6 lg:col-3">
|
|
<label for="filtreRetardJours" class="block text-900 font-medium mb-2">Retard (jours)</label>
|
|
<p:selectOneMenu id="filtreRetardJours"
|
|
value="#{cotisationsGestionBean.filtres.retardJours}"
|
|
styleClass="w-full">
|
|
<f:selectItem itemLabel="Tous" itemValue="" />
|
|
<f:selectItem itemLabel="0-7 jours" itemValue="7" />
|
|
<f:selectItem itemLabel="8-30 jours" itemValue="30" />
|
|
<f:selectItem itemLabel="31-60 jours" itemValue="60" />
|
|
<f:selectItem itemLabel="Plus de 60 jours" itemValue="60+" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6 lg:col-3">
|
|
<label for="filtreModePaiement" class="block text-900 font-medium mb-2">Mode de paiement</label>
|
|
<p:selectOneMenu id="filtreModePaiement"
|
|
value="#{cotisationsGestionBean.filtres.modePaiement}"
|
|
styleClass="w-full">
|
|
<f:selectItem itemLabel="Tous" itemValue="" />
|
|
<f:selectItem itemLabel="Wave Money" itemValue="WAVE" />
|
|
<f:selectItem itemLabel="Orange Money" itemValue="ORANGE" />
|
|
<f:selectItem itemLabel="Virement" itemValue="VIREMENT" />
|
|
<f:selectItem itemLabel="Espèces" itemValue="ESPECES" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-content-end mt-3">
|
|
<p:commandButton value="Appliquer"
|
|
icon="pi pi-check"
|
|
styleClass="ui-button-primary ui-button-sm mr-2"
|
|
action="#{cotisationsGestionBean.appliquerFiltres}"
|
|
update="@form :formTableCotisations:dtCotisations" />
|
|
<p:commandButton value="Réinitialiser"
|
|
icon="pi pi-refresh"
|
|
styleClass="ui-button-outlined ui-button-secondary ui-button-sm"
|
|
action="#{cotisationsGestionBean.reinitialiserFiltres}"
|
|
update="@form :formTableCotisations:dtCotisations" />
|
|
</div>
|
|
</p:panel>
|
|
</h:form>
|
|
</div>
|
|
|
|
<!-- Table des Cotisations avec structure Freya -->
|
|
<div class="card">
|
|
<h:form id="formTableCotisations">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<h5 class="m-0">
|
|
<i class="pi pi-list text-primary mr-2"></i>
|
|
Liste des Cotisations
|
|
</h5>
|
|
<div class="flex gap-3 align-items-center">
|
|
<p:commandButton value="Actions groupées"
|
|
icon="pi pi-bars"
|
|
styleClass="ui-button-warning ui-button-sm"
|
|
onclick="PF('dlgActionsGroupees').show();"
|
|
disabled="#{empty cotisationsGestionBean.cotisationsSelectionnees}" />
|
|
<p:commandButton value="Export Excel"
|
|
icon="pi pi-file-excel"
|
|
styleClass="ui-button-success ui-button-outlined ui-button-sm"
|
|
action="#{cotisationsGestionBean.exporterExcel}" />
|
|
</div>
|
|
</div>
|
|
|
|
<p:dataTable id="dtCotisations"
|
|
var="cotisation"
|
|
value="#{cotisationsGestionBean.cotisationsFiltrees}"
|
|
selection="#{cotisationsGestionBean.cotisationsSelectionnees}"
|
|
rowKey="#{cotisation.id}"
|
|
paginator="true"
|
|
rows="25"
|
|
paginatorPosition="bottom"
|
|
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
|
|
rowsPerPageTemplate="10,25,50,100"
|
|
currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords} cotisations"
|
|
styleClass="p-datatable-sm p-datatable-gridlines p-datatable-striped"
|
|
emptyMessage="Aucune cotisation trouvée">
|
|
|
|
<p:column selectionMode="multiple" style="width:3rem" exportable="false"/>
|
|
|
|
<p:column headerText="Organisation" sortBy="#{cotisation.nomOrganisation}" filterBy="#{cotisation.nomOrganisation}">
|
|
<div class="flex align-items-center">
|
|
<i class="pi #{cotisation.iconeOrganisation} text-primary mr-2"></i>
|
|
<div>
|
|
<div class="font-semibold">#{cotisation.nomOrganisation}</div>
|
|
<div class="text-500 text-xs">#{cotisation.regionOrganisation}</div>
|
|
</div>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Membre" sortBy="#{cotisation.nomCompletMembre}" filterBy="#{cotisation.nomCompletMembre}">
|
|
<div class="flex align-items-center">
|
|
<div class="flex align-items-center justify-content-center bg-primary-100 border-circle mr-2"
|
|
style="width: 2rem; height: 2rem;">
|
|
<span class="text-primary-700 font-semibold text-sm">#{cotisation.initialesMembre}</span>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium">#{cotisation.nomCompletMembre}</div>
|
|
<div class="text-500 text-xs">#{cotisation.numeroMembre} • #{cotisation.typeMembre}</div>
|
|
</div>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Type" sortBy="#{cotisation.type}" filterBy="#{cotisation.type}" style="width:10rem">
|
|
<p:tag value="#{cotisation.typeLibelle}"
|
|
severity="#{cotisation.typeSeverity}"
|
|
icon="pi #{cotisation.typeIcon}"
|
|
styleClass="text-xs" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Période" sortBy="#{cotisation.periode}" style="width:10rem">
|
|
<div>
|
|
<div class="font-medium">#{cotisation.periode}</div>
|
|
<div class="text-500 text-xs">#{cotisation.annee}</div>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Montant" sortBy="#{cotisation.montant}" style="width:8rem; text-align:right">
|
|
<span class="font-bold text-green-600">#{cotisation.montantFormatte} FCFA</span>
|
|
</p:column>
|
|
|
|
<p:column headerText="Statut" sortBy="#{cotisation.statut}" filterBy="#{cotisation.statut}" style="width:8rem">
|
|
<p:tag value="#{cotisation.statutLibelle}"
|
|
severity="#{cotisation.statutSeverity}"
|
|
icon="pi #{cotisation.statutIcon}"
|
|
styleClass="text-xs w-full" />
|
|
</p:column>
|
|
|
|
<p:column headerText="Échéance" sortBy="#{cotisation.dateEcheance}" style="width:8rem">
|
|
<div>
|
|
<div class="text-xs">#{cotisation.dateEcheanceFormattee}</div>
|
|
<div class="text-xs #{cotisation.retardCouleur} font-semibold">#{cotisation.retardTexte}</div>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Paiement" style="width:10rem">
|
|
<div rendered="#{cotisation.datePaiement != null}">
|
|
<div class="text-xs">#{cotisation.datePaiementFormattee}</div>
|
|
<div class="flex align-items-center text-xs text-500">
|
|
<i class="pi #{cotisation.modePaiementIcon} mr-1"></i>
|
|
#{cotisation.modePaiementLibelle}
|
|
</div>
|
|
</div>
|
|
<span class="text-400 text-xs" rendered="#{cotisation.datePaiement == null}">Non payé</span>
|
|
</p:column>
|
|
|
|
<p:column headerText="Actions" style="width:8rem" exportable="false">
|
|
<div class="flex gap-1">
|
|
<p:commandButton icon="pi pi-check"
|
|
styleClass="ui-button-rounded ui-button-text ui-button-success ui-button-sm"
|
|
title="Enregistrer paiement"
|
|
action="#{cotisationsGestionBean.enregistrerPaiement(cotisation)}"
|
|
rendered="#{cotisation.statut != 'PAYE'}" />
|
|
<p:commandButton icon="pi pi-file-pdf"
|
|
styleClass="ui-button-rounded ui-button-text ui-button-info ui-button-sm"
|
|
title="Générer reçu"
|
|
action="#{cotisationsGestionBean.genererRecu(cotisation)}"
|
|
rendered="#{cotisation.statut == 'PAYE'}" />
|
|
<p:commandButton icon="pi pi-send"
|
|
styleClass="ui-button-rounded ui-button-text ui-button-warning ui-button-sm"
|
|
title="Envoyer rappel"
|
|
action="#{cotisationsGestionBean.envoyerRappel(cotisation)}"
|
|
rendered="#{cotisation.statut == 'EN_RETARD'}" />
|
|
<p:commandButton icon="pi pi-eye"
|
|
styleClass="ui-button-rounded ui-button-text ui-button-secondary ui-button-sm"
|
|
title="Voir détails"
|
|
action="#{cotisationsGestionBean.voirDetails(cotisation)}" />
|
|
</div>
|
|
</p:column>
|
|
</p:dataTable>
|
|
|
|
<!-- Résumé sélection -->
|
|
<div class="surface-100 border-round-lg p-3 mt-3" rendered="#{not empty cotisationsGestionBean.cotisationsSelectionnees}">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<span class="font-medium">
|
|
<i class="pi pi-info-circle text-blue-500 mr-2"></i>
|
|
#{cotisationsGestionBean.cotisationsSelectionnees.size()} cotisation(s) sélectionnée(s)
|
|
</span>
|
|
<span class="font-bold text-green-600">
|
|
Montant total: #{cotisationsGestionBean.montantTotalSelectionne}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
|
|
<!-- Section Wave Money avec structure Freya -->
|
|
<div class="formgrid grid">
|
|
<div class="field col-12 lg:col-6">
|
|
<div class="card">
|
|
<h5 class="mb-3">
|
|
<i class="pi pi-mobile text-teal-500 mr-2"></i>
|
|
Intégration Wave Money
|
|
</h5>
|
|
|
|
<div class="surface-50 border-round-lg p-3 mb-3">
|
|
<div class="formgrid grid">
|
|
<div class="field col-6">
|
|
<div class="text-500 text-sm mb-1">Membres actifs</div>
|
|
<div class="text-900 font-bold text-xl">#{cotisationsGestionBean.membresPrelevementActif}</div>
|
|
</div>
|
|
<div class="field col-6">
|
|
<div class="text-500 text-sm mb-1">Montant mensuel</div>
|
|
<div class="text-900 font-bold text-xl">#{cotisationsGestionBean.montantPrelevementMensuel}</div>
|
|
</div>
|
|
<div class="field col-12">
|
|
<div class="text-500 text-sm mb-1">Prochain prélèvement</div>
|
|
<div class="text-900 font-bold">#{cotisationsGestionBean.prochainPrelevement}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h:form id="formWaveMoney">
|
|
<div class="flex flex-wrap gap-2">
|
|
<p:commandButton value="Lancer prélèvements"
|
|
icon="pi pi-play"
|
|
styleClass="ui-button-success ui-button-sm"
|
|
action="#{cotisationsGestionBean.lancerPrelevements}" />
|
|
<p:commandButton value="Tester API"
|
|
icon="pi pi-check-circle"
|
|
styleClass="ui-button-info ui-button-outlined ui-button-sm"
|
|
action="#{cotisationsGestionBean.testerAPIWave}" />
|
|
<p:commandButton value="Historique"
|
|
icon="pi pi-history"
|
|
styleClass="ui-button-secondary ui-button-outlined ui-button-sm"
|
|
action="#{cotisationsGestionBean.voirHistoriquePrelevements}" />
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field col-12 lg:col-6">
|
|
<div class="card">
|
|
<h5 class="mb-3">
|
|
<i class="pi pi-bolt text-orange-500 mr-2"></i>
|
|
Actions Rapides
|
|
</h5>
|
|
|
|
<h:form id="formActionsRapides">
|
|
<div class="formgrid grid">
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Rapport mensuel"
|
|
icon="pi pi-chart-bar"
|
|
styleClass="ui-button-primary ui-button-outlined ui-button-sm w-full mb-2"
|
|
action="#{cotisationsGestionBean.genererRapportMensuel}" />
|
|
</div>
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Relances auto"
|
|
icon="pi pi-sync"
|
|
styleClass="ui-button-warning ui-button-outlined ui-button-sm w-full mb-2"
|
|
action="#{cotisationsGestionBean.configurerRelancesAuto}" />
|
|
</div>
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Types cotisations"
|
|
icon="pi pi-tags"
|
|
styleClass="ui-button-info ui-button-outlined ui-button-sm w-full mb-2"
|
|
action="#{cotisationsGestionBean.gererTypesCotisations}" />
|
|
</div>
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Tableau de bord"
|
|
icon="pi pi-desktop"
|
|
styleClass="ui-button-success ui-button-outlined ui-button-sm w-full mb-2"
|
|
action="#{cotisationsGestionBean.tableauDeBord}" />
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dialogs avec structure Freya -->
|
|
|
|
<!-- Dialog Nouvelle Campagne -->
|
|
<p:dialog header="Créer une Nouvelle Campagne de Cotisation"
|
|
widgetVar="dlgNouvelleCampagne"
|
|
modal="true"
|
|
width="600"
|
|
height="auto"
|
|
resizable="false">
|
|
<h:form id="formNouvelleCampagne">
|
|
<div class="ui-fluid formgrid grid">
|
|
<div class="field col-12">
|
|
<label for="nomCampagne" class="block text-900 font-medium mb-2">Nom de la campagne *</label>
|
|
<p:inputText id="nomCampagne"
|
|
value="#{cotisationsGestionBean.nouvelleCampagne.nom}"
|
|
required="true"
|
|
placeholder="Ex: Cotisation Janvier 2025" />
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6">
|
|
<label for="typeCampagne" class="block text-900 font-medium mb-2">Type *</label>
|
|
<p:selectOneMenu id="typeCampagne"
|
|
value="#{cotisationsGestionBean.nouvelleCampagne.type}"
|
|
required="true">
|
|
<f:selectItem itemLabel="Sélectionner..." itemValue="" />
|
|
<f:selectItem itemLabel="Mensuelle" itemValue="MENSUELLE" />
|
|
<f:selectItem itemLabel="Spéciale" itemValue="SPECIALE" />
|
|
<f:selectItem itemLabel="Événement" itemValue="EVENEMENT" />
|
|
<f:selectItem itemLabel="Adhésion" itemValue="ADHESION" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6">
|
|
<label for="montantCampagne" class="block text-900 font-medium mb-2">Montant (FCFA) *</label>
|
|
<p:inputNumber id="montantCampagne"
|
|
value="#{cotisationsGestionBean.nouvelleCampagne.montant}"
|
|
required="true"
|
|
symbol=" FCFA"
|
|
symbolPosition="s"
|
|
minValue="0" />
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6">
|
|
<label for="dateEcheanceCampagne" class="block text-900 font-medium mb-2">Date d'échéance *</label>
|
|
<p:datePicker id="dateEcheanceCampagne"
|
|
value="#{cotisationsGestionBean.nouvelleCampagne.dateEcheance}"
|
|
required="true"
|
|
showIcon="true"
|
|
pattern="dd/MM/yyyy" />
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6">
|
|
<label for="scopeCampagne" class="block text-900 font-medium mb-2">Portée</label>
|
|
<p:selectOneMenu id="scopeCampagne"
|
|
value="#{cotisationsGestionBean.nouvelleCampagne.scope}">
|
|
<f:selectItem itemLabel="Toutes les organisations" itemValue="TOUTES" />
|
|
<f:selectItem itemLabel="Organisations sélectionnées" itemValue="SELECTION" />
|
|
<f:selectItem itemLabel="Par région" itemValue="REGION" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field col-12">
|
|
<label for="descriptionCampagne" class="block text-900 font-medium mb-2">Description</label>
|
|
<p:inputTextarea id="descriptionCampagne"
|
|
value="#{cotisationsGestionBean.nouvelleCampagne.description}"
|
|
rows="3"
|
|
placeholder="Description optionnelle de la campagne..." />
|
|
</div>
|
|
|
|
<div class="field col-12">
|
|
<p:selectBooleanCheckbox id="relanceAuto"
|
|
value="#{cotisationsGestionBean.nouvelleCampagne.relanceAutomatique}" />
|
|
<label for="relanceAuto" class="ml-2">Activer les relances automatiques</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-content-end gap-2 mt-3">
|
|
<p:commandButton value="Annuler"
|
|
icon="pi pi-times"
|
|
styleClass="ui-button-secondary ui-button-outlined ui-button-sm"
|
|
onclick="PF('dlgNouvelleCampagne').hide();"
|
|
type="button" />
|
|
<p:commandButton value="Créer la campagne"
|
|
icon="pi pi-check"
|
|
styleClass="ui-button-success ui-button-sm"
|
|
action="#{cotisationsGestionBean.creerCampagne}"
|
|
update="@form"
|
|
oncomplete="if(!args.validationFailed) PF('dlgNouvelleCampagne').hide();" />
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
|
|
<!-- Dialog Actions Groupées -->
|
|
<p:dialog header="Actions Groupées"
|
|
widgetVar="dlgActionsGroupees"
|
|
modal="true"
|
|
width="400"
|
|
height="auto"
|
|
resizable="false">
|
|
<h:form id="formActionsGroupees">
|
|
<div class="surface-50 border-round-lg p-3 mb-3">
|
|
<div class="text-500 text-sm mb-1">Cotisations sélectionnées</div>
|
|
<div class="text-900 font-bold text-xl">#{cotisationsGestionBean.cotisationsSelectionnees.size()}</div>
|
|
<div class="text-500 text-sm">Montant total: #{cotisationsGestionBean.montantTotalSelectionne}</div>
|
|
</div>
|
|
|
|
<div class="flex flex-column gap-2">
|
|
<p:commandButton value="Marquer comme payées"
|
|
icon="pi pi-check"
|
|
styleClass="ui-button-success ui-button-sm w-full"
|
|
action="#{cotisationsGestionBean.marquerPayeesGroupees}"
|
|
onclick="PF('dlgActionsGroupees').hide();" />
|
|
|
|
<p:commandButton value="Envoyer relances"
|
|
icon="pi pi-send"
|
|
styleClass="ui-button-warning ui-button-sm w-full"
|
|
action="#{cotisationsGestionBean.envoyerRelancesGroupees}"
|
|
onclick="PF('dlgActionsGroupees').hide();" />
|
|
|
|
<p:commandButton value="Générer reçus"
|
|
icon="pi pi-file-pdf"
|
|
styleClass="ui-button-info ui-button-sm w-full"
|
|
action="#{cotisationsGestionBean.genererRecusGroupes}"
|
|
onclick="PF('dlgActionsGroupees').hide();" />
|
|
|
|
<p:commandButton value="Annuler cotisations"
|
|
icon="pi pi-times"
|
|
styleClass="ui-button-danger ui-button-outlined ui-button-sm w-full"
|
|
action="#{cotisationsGestionBean.annulerCotisationsGroupees}"
|
|
onclick="return confirm('Êtes-vous sûr de vouloir annuler ces cotisations ?');" />
|
|
</div>
|
|
</h:form>
|
|
</p:dialog>
|
|
</ui:define>
|
|
</ui:composition> |