From 69c9cfcda7068c24c310a70c4a029f2c220abeea Mon Sep 17 00:00:00 2001
From: dahoud <dahoud@dgbf.ci>
Date: Sun, 30 Nov 2025 12:07:07 +0000
Subject: [PATCH] =?UTF-8?q?refactor:=20R=C3=A9utilisation=20filter-bar.xht?=
 =?UTF-8?q?ml=20dans=20evenement=20et=20cotisation=20(DRY/WOU)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/secure/cotisation/collect.xhtml     | 126 +++++++++-------
 .../pages/secure/evenement/gestion.xhtml      | 135 +++++++++++-------
 2 files changed, 158 insertions(+), 103 deletions(-)

diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/collect.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/collect.xhtml
index 9191658..e772ba6 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/collect.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/cotisation/collect.xhtml
@@ -78,59 +78,81 @@
             <h:form id="formCotisations">
                 <h5>Liste des Cotisations</h5>
                 
-                <!-- Filtres -->
-                <p:toolbar>
-                    <p:toolbarGroup>
-                        <div class="flex align-items-center gap-2">
-                            <span class="p-input-icon-left">
-                                <i class="pi pi-search"></i>
-                                <p:inputText placeholder="Rechercher par membre..." 
-                                           value="#{cotisationsBean.filtres.nomMembre}"
-                                           styleClass="w-full">
-                                    <p:ajax event="keyup" update="dtCotisations" />
-                                </p:inputText>
-                            </span>
-                            
-                            <p:selectOneMenu 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 update="dtCotisations" />
-                            </p:selectOneMenu>
-                            
-                            <p:selectOneMenu 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 update="dtCotisations" />
-                            </p:selectOneMenu>
+                <!-- 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>
-                    </p:toolbarGroup>
-                    
-                    <p:toolbarGroup align="right">
-                        <ui:include src="/templates/components/buttons/button-secondary.xhtml">
-                            <ui:param name="value" value="Filtres avancés" />
-                            <ui:param name="icon" value="pi pi-filter" />
-                            <ui:param name="onclick" value="PF('dlgFiltresAvances').show();" />
-                            <ui:param name="outlined" value="true" />
-                            <ui:param name="styleClass" value="mr-2" />
-                        </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" />
-                            <ui:param name="outlined" value="true" />
-                        </ui:include>
-                    </p:toolbarGroup>
-                </p:toolbar>
+                        <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" 
diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/gestion.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/gestion.xhtml
index 522975b..74837fa 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/gestion.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/evenement/gestion.xhtml
@@ -77,58 +77,91 @@
             <h:form id="formEvenements">
                 <h5>Liste des Événements</h5>
                 
-                <!-- Filtres -->
-                <p:toolbar>
-                    <p:toolbarGroup>
-                        <div class="flex align-items-center gap-2 flex-wrap">
-                            <ui:include src="/templates/components/forms/form-field-search-text.xhtml">
-                                <ui:param name="id" value="searchTitre" />
-                                <ui:param name="value" value="#{evenementsBean.filtres.titre}" />
-                                <ui:param name="placeholder" value="Rechercher par titre..." />
-                                <ui:param name="update" value="dtEvenements" />
-                            </ui:include>
-                            
-                            <p:selectOneMenu value="#{evenementsBean.filtres.type}" styleClass="w-full" style="min-width: 200px;">
-                                <f:selectItem itemLabel="Tous les types" itemValue="" />
-                                <f:selectItem itemLabel="Assemblée Générale" itemValue="ASSEMBLEE_GENERALE" />
-                                <f:selectItem itemLabel="Formation" itemValue="FORMATION" />
-                                <f:selectItem itemLabel="Activité Sociale" itemValue="ACTIVITE_SOCIALE" />
-                                <f:selectItem itemLabel="Action Caritative" itemValue="ACTION_CARITATIVE" />
-                                <f:selectItem itemLabel="Réunion de Bureau" itemValue="REUNION_BUREAU" />
-                                <f:selectItem itemLabel="Conférence" itemValue="CONFERENCE" />
-                                <f:selectItem itemLabel="Atelier" itemValue="ATELIER" />
-                                <f:selectItem itemLabel="Cérémonie" itemValue="CEREMONIE" />
-                                <f:selectItem itemLabel="Autre" itemValue="AUTRE" />
-                                <p:ajax event="change" update="dtEvenements" />
-                            </p:selectOneMenu>
-                            
-                            <p:selectOneMenu value="#{evenementsBean.filtres.statut}" styleClass="w-full" style="min-width: 200px;">
-                                <f:selectItem itemLabel="Tous les statuts" itemValue="" />
-                                <f:selectItem itemLabel="Planifié" itemValue="PLANIFIE" />
-                                <f:selectItem itemLabel="Confirmé" itemValue="CONFIRME" />
-                                <f:selectItem itemLabel="En cours" itemValue="EN_COURS" />
-                                <f:selectItem itemLabel="Terminé" itemValue="TERMINE" />
-                                <f:selectItem itemLabel="Annulé" itemValue="ANNULE" />
-                                <f:selectItem itemLabel="Reporté" itemValue="REPORTE" />
-                                <p:ajax event="change" update="dtEvenements" />
-                            </p:selectOneMenu>
-                            
-                            <p:selectOneMenu value="#{evenementsBean.filtres.priorite}" styleClass="w-full" style="min-width: 150px;">
-                                <f:selectItem itemLabel="Toutes les priorités" itemValue="" />
-                                <f:selectItem itemLabel="Critique" itemValue="CRITIQUE" />
-                                <f:selectItem itemLabel="Haute" itemValue="HAUTE" />
-                                <f:selectItem itemLabel="Normale" itemValue="NORMALE" />
-                                <f:selectItem itemLabel="Basse" itemValue="BASSE" />
-                                <p:ajax event="change" update="dtEvenements" />
-                            </p:selectOneMenu>
-                            
-                            <p:commandButton value="Réinitialiser" icon="pi pi-filter-slash" 
-                                            action="#{evenementsBean.reinitialiserFiltres}"
-                                            update="dtEvenements, formEvenements"
-                                            styleClass="p-button-outlined" />
+                <!-- 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="searchTitre" value="Rechercher" />
+                                <span class="p-input-icon-left w-full">
+                                    <i class="pi pi-search"></i>
+                                    <p:inputText id="searchTitre" 
+                                               placeholder="Rechercher par titre..." 
+                                               value="#{evenementsBean.filtres.titre}"
+                                               styleClass="w-full">
+                                        <p:ajax event="keyup" update="dtEvenements" delay="500"/>
+                                    </p:inputText>
+                                </span>
+                            </div>
                         </div>
-                    </p:toolbarGroup>
-                </p:toolbar>
+                        <div class="col-12 md:col-2">
+                            <div class="field">
+                                <p:outputLabel for="filtreType" value="Type" />
+                                <p:selectOneMenu id="filtreType" 
+                                                value="#{evenementsBean.filtres.type}" 
+                                                styleClass="w-full">
+                                    <f:selectItem itemLabel="Tous les types" itemValue="" />
+                                    <f:selectItem itemLabel="Assemblée Générale" itemValue="ASSEMBLEE_GENERALE" />
+                                    <f:selectItem itemLabel="Formation" itemValue="FORMATION" />
+                                    <f:selectItem itemLabel="Activité Sociale" itemValue="ACTIVITE_SOCIALE" />
+                                    <f:selectItem itemLabel="Action Caritative" itemValue="ACTION_CARITATIVE" />
+                                    <f:selectItem itemLabel="Réunion de Bureau" itemValue="REUNION_BUREAU" />
+                                    <f:selectItem itemLabel="Conférence" itemValue="CONFERENCE" />
+                                    <f:selectItem itemLabel="Atelier" itemValue="ATELIER" />
+                                    <f:selectItem itemLabel="Cérémonie" itemValue="CEREMONIE" />
+                                    <f:selectItem itemLabel="Autre" itemValue="AUTRE" />
+                                    <p:ajax event="change" update="dtEvenements" />
+                                </p:selectOneMenu>
+                            </div>
+                        </div>
+                        <div class="col-12 md:col-2">
+                            <div class="field">
+                                <p:outputLabel for="filtreStatut" value="Statut" />
+                                <p:selectOneMenu id="filtreStatut" 
+                                                value="#{evenementsBean.filtres.statut}" 
+                                                styleClass="w-full">
+                                    <f:selectItem itemLabel="Tous les statuts" itemValue="" />
+                                    <f:selectItem itemLabel="Planifié" itemValue="PLANIFIE" />
+                                    <f:selectItem itemLabel="Confirmé" itemValue="CONFIRME" />
+                                    <f:selectItem itemLabel="En cours" itemValue="EN_COURS" />
+                                    <f:selectItem itemLabel="Terminé" itemValue="TERMINE" />
+                                    <f:selectItem itemLabel="Annulé" itemValue="ANNULE" />
+                                    <f:selectItem itemLabel="Reporté" itemValue="REPORTE" />
+                                    <p:ajax event="change" update="dtEvenements" />
+                                </p:selectOneMenu>
+                            </div>
+                        </div>
+                        <div class="col-12 md:col-2">
+                            <div class="field">
+                                <p:outputLabel for="filtrePriorite" value="Priorité" />
+                                <p:selectOneMenu id="filtrePriorite" 
+                                                value="#{evenementsBean.filtres.priorite}" 
+                                                styleClass="w-full">
+                                    <f:selectItem itemLabel="Toutes les priorités" itemValue="" />
+                                    <f:selectItem itemLabel="Critique" itemValue="CRITIQUE" />
+                                    <f:selectItem itemLabel="Haute" itemValue="HAUTE" />
+                                    <f:selectItem itemLabel="Normale" itemValue="NORMALE" />
+                                    <f:selectItem itemLabel="Basse" itemValue="BASSE" />
+                                    <p:ajax event="change" update="dtEvenements" />
+                                </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="Réinitialiser"
+                                               icon="pi pi-filter-slash"
+                                               action="#{evenementsBean.reinitialiserFiltres}"
+                                               update="dtEvenements searchTitre filtreType filtreStatut filtrePriorite"
+                                               styleClass="ui-button-secondary w-full" />
+                            </div>
+                        </div>
+                    </ui:define>
+                </ui:decorate>
                 
                 <!-- Tableau des événements -->
                 <p:dataTable id="dtEvenements"