unionflow-server-api/unionflow/docs/CHANGEMENTS_PAGES_COTISATIONS_APPLIQUES.md

Changements Pages Cotisations - Appliqués

Date: 2026-03-02 Système: UnionFlow - Pages Cotisations Statut: ✅ APPLIQUÉ

---

Changements Appliqués

✅ 1. /pages/secure/membre/cotisations.xhtml - Correction Titre

Fichier : cotisations.xhtml (ligne 89)

Avant ❌

<h5 class="mb-3">Historique des Cotisations</h5>

Problème : Redondant avec le menu "Historique"

Après ✅

<h5 class="mb-3">Mes Cotisations</h5>

Résultat : Titre clair et non redondant

---

✅ 2. /pages/secure/membre/paiement-mes-cotisations.xhtml - CRÉÉE

Fichier : NOUVEAU fichier créé pour MEMBRE_ACTIF

Contenu de la Page

KPI Personnels (Utilise kpi-card.xhtml - DRY/WOU ✅)

• Cotisations à Payer
• Montant Dû
• Prochaine Échéance
• Total Payé en {année}

Tableau "Mes Cotisations en Attente"

• ✅ PAS de colonne "Membre" (redondant pour un membre)
• Colonnes : Référence, Type, Période, Montant Dû, Échéance, Actions
• Actions :
  • "Payer en ligne" → Dialog paiement Wave/Orange/Free Money/Carte
  • "Autre" → Dialog déclaration paiement manuel (validation trésorier requise)

Tableau "Mes Derniers Paiements"

• Historique des 5 derniers paiements
• Action : Télécharger reçu PDF

Dialogs

1. Paiement en Ligne : Choix méthode + numéro téléphone → Redirection gateway
2. Paiement Manuel : Déclaration paiement effectué autrement (espèces, virement, chèque)

Caractéristiques UX

✅ Données personnelles uniquement (pas de stats globales) ✅ Interface simplifiée pour un membre ✅ Actions pertinentes : Payer mes cotisations, pas gérer celles des autres ✅ Composants réutilisables : kpi-card, form-field-*, buttons

---

✅ 3. /pages/secure/cotisation/paiement.xhtml - Conditionnement ADMIN

Fichier : paiement.xhtml (modifications lignes 36, 67, 140)

A. KPI Globaux - TRESORIER/ADMIN SEULEMENT

Ligne 36 :

<!-- Statistiques de paiement - TRESORIER/ADMIN SEULEMENT -->
<div class="grid" rendered="#{menuBean.gestionFinancesMenuVisible}">
    <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:include>
</div>

KPI conditionnés :

• Total Collecté
• Moyenne Mensuelle
• Objectif Annuel
• Taux de Recouvrement

---

B. Répartition Méthodes - TRESORIER/ADMIN SEULEMENT

Ligne 67 :

<!-- Répartition par méthode de paiement - TRESORIER/ADMIN SEULEMENT -->
<div class="card" rendered="#{menuBean.gestionFinancesMenuVisible}">
    <h5>Répartition par Méthode de Paiement</h5>
    ...
</div>

---

C. Colonne "Membre" - TRESORIER/ADMIN SEULEMENT

Ligne 140 :

<!-- Colonne Membre - TRESORIER/ADMIN SEULEMENT -->
<p:column headerText="Membre" sortBy="#{cotisation.nomMembre}"
          rendered="#{menuBean.gestionFinancesMenuVisible}">
    <div>
        <div class="font-medium">#{cotisation.nomMembre}</div>
        <div class="text-600 text-sm">#{cotisation.numeroMembre}</div>
    </div>
</p:column>

Résultat : Si un MEMBRE_ACTIF accède à cette page (URL directe), il ne verra PAS les données admin

---

Architecture Finale

Pages Cotisations par Rôle

Page	Rôle	URL	Contenu
cotisations.xhtml	MEMBRE_ACTIF	/pages/secure/membre/cotisations.xhtml	Liste MES cotisations (payées, en attente) Auto-détection membre connecté Actions : Voir reçu
paiement-mes-cotisations.xhtml	MEMBRE_ACTIF	/pages/secure/membre/paiement-mes-cotisations.xhtml	NOUVEAU KPI personnels Payer MES cotisations en ligne Déclarer paiement manuel
paiement.xhtml	TRESORIER/ADMIN	/pages/secure/cotisation/paiement.xhtml	Conditionné KPI globaux (si admin) Liste TOUTES les cotisations Colonne "Membre" (si admin) Enregistrer paiements

---

Menu Recommandé

Menu MEMBRE_ACTIF

<p:submenu label="Mes Finances" icon="pi pi-wallet"
           rendered="#{menuBean.mesFinancesMenuVisible}">
    <p:menuitem value="Mes Cotisations"
                icon="pi pi-list"
                outcome="/pages/secure/membre/cotisations" />
    <p:menuitem value="Payer en Ligne"
                icon="pi pi-credit-card"
                outcome="/pages/secure/membre/paiement-mes-cotisations" />
    <p:menuitem value="Mon Épargne"
                icon="pi pi-money-bill"
                outcome="/pages/secure/epargne/mon-compte" />
    <p:menuitem value="Mes Prêts"
                icon="pi pi-briefcase"
                outcome="/pages/secure/credit/mes-prets"
                rendered="#{config.moduleCredit}" />
</p:submenu>

---

Menu TRESORIER/ADMIN

<p:submenu label="Gestion Financière" icon="pi pi-dollar"
           rendered="#{menuBean.gestionFinancesMenuVisible}">
    <p:menuitem value="Enregistrer Paiements"
                icon="pi pi-wallet"
                outcome="/pages/secure/cotisation/paiement" />
    <p:menuitem value="Trésorerie"
                icon="pi pi-chart-line"
                outcome="/pages/secure/finance/tresorerie" />
    <p:menuitem value="Relances Cotisations"
                icon="pi pi-bell"
                outcome="/pages/secure/cotisation/relances" />
    <p:menuitem value="Rapports Financiers"
                icon="pi pi-chart-bar"
                outcome="/pages/secure/finance/rapports" />
</p:submenu>

---

Problèmes Résolus

❌ Problème 1 : "Aucun membre sélectionné" (Double affichage)

Statut : ⏳ À résoudre côté Bean

Solution : Modifier MembreCotisationBean.java pour auto-détecter le membre connecté

@PostConstruct
public void init() {
    if (membreId == null || membreId.isEmpty()) {
        // Auto-détection du membre connecté
        String email = securityIdentity.getPrincipal().getName();
        Membre membreConnecte = membreRepository.findByEmail(email);
        if (membreConnecte != null) {
            this.membreId = membreConnecte.getId().toString();
            this.numeroMembre = membreConnecte.getNumeroMembre();
            chargerCotisations();
        } else {
            // Afficher message d'erreur
            facesContext.addMessage(null, new FacesMessage(
                FacesMessage.SEVERITY_ERROR,
                "Erreur",
                "Impossible de charger vos cotisations. Veuillez contacter l'administrateur."
            ));
        }
    } else {
        // ID fourni en paramètre (consultation admin d'un membre spécifique)
        chargerCotisations();
    }
}

---

✅ Problème 2 : "Historique des Cotisations" (Redondant)

Statut : ✅ RÉSOLU

Solution : Titre changé de "Historique des Cotisations" → "Mes Cotisations"

---

✅ Problème 3 : Page ADMIN affichée pour MEMBRE_ACTIF

Statut : ✅ RÉSOLU

Solutions appliquées :

1. ✅ Création page dédiée paiement-mes-cotisations.xhtml pour MEMBRE_ACTIF
2. ✅ Conditionnement paiement.xhtml pour masquer KPI globaux et colonne "Membre" si pas admin

---

Composants Réutilisables Utilisés

✅ Conformité DRY/WOU

Pages utilisant les composants réutilisables :

1. cotisations.xhtml :

   • ✅ kpi-card.xhtml (4 KPI)
   • ✅ button-secondary.xhtml (Bouton Retour, Actualiser)

2. paiement-mes-cotisations.xhtml :

   • ✅ kpi-card.xhtml (4 KPI personnels)
   • ✅ page-header.xhtml (En-tête)
   • ✅ form-field-select.xhtml (Méthode paiement)
   • ✅ form-field-text.xhtml (Numéro téléphone, Référence)
   • ✅ form-field-textarea.xhtml (Commentaire)
   • ✅ button-*.xhtml (Tous les boutons)

3. paiement.xhtml :

   • ✅ stat-card.xhtml (4 KPI globaux)
   • ✅ page-header.xhtml (En-tête)
   • ✅ button-icon.xhtml (Bouton Actualiser)
   • ✅ form-field-*.xhtml (Formulaires dialogs)
   • ✅ button-*.xhtml (Tous les boutons)

Résultat : ✅ Toutes les pages utilisent bien les composants réutilisables !

---

Bean Backend à Créer

MesCotisationsPaiementBean.java

Localisation : unionflow-client-quarkus-primefaces-freya/src/main/java/dev/lions/unionflow/client/view/MesCotisationsPaiementBean.java

Responsabilités :

• Auto-détecter le membre connecté via SecurityIdentity
• Charger uniquement SES cotisations en attente
• Calculer les KPI personnels (cotisations à payer, montant dû, prochaine échéance, total payé)
• Charger l'historique de SES paiements
• Initier paiement en ligne (redirection vers gateway Wave/Orange/Free/Carte)
• Déclarer paiement manuel (statut EN_ATTENTE_VALIDATION)
• Télécharger reçus PDF

Propriétés :

private Integer cotisationsEnAttente;
private String montantDu; // Formaté avec FCFA
private String prochaineEcheance; // Formaté dd/MM/yyyy
private String totalPaye; // Formaté avec FCFA
private Integer anneeEnCours; // 2024, 2025, etc.
private List<CotisationResponse> mesCotisationsEnAttente;
private List<PaiementResponse> derniersPaiements;
private String methodePaiementChoisie;
private String numeroTelephone;
private String methodePaiementManuel;
private String referencePaiementManuel;
private String commentairePaiement;
private boolean paiementManuelActive; // Config organisation

Endpoints REST à implémenter :

• GET /api/cotisations/mes-cotisations/en-attente → List
• GET /api/cotisations/mes-cotisations/synthese → Synthèse KPI
• GET /api/paiements/mes-paiements/historique?limit=5 → List
• POST /api/paiements/initier-paiement-en-ligne → PaymentGatewayResponse (redirect URL)
• POST /api/paiements/declarer-paiement-manuel → 201 Created
• GET /api/paiements/telecharger-recu/{id} → PDF file

---

Checklist Validation UX

• Problème 1 : "Aucun membre sélectionné" → ⏳ À résoudre côté Bean
• Problème 2 : "Historique des Cotisations" → ✅ Résolu (renommé "Mes Cotisations")
• Problème 3 : Page ADMIN pour MEMBRE_ACTIF → ✅ Résolu (page dédiée + conditionnement)
• KPI composants réutilisables : ✅ Utilisés partout (kpi-card, stat-card)
• Séparation MEMBRE vs ADMIN : ✅ Pages distinctes + conditionnement
• Bean backend MesCotisationsPaiementBean : ⏳ À créer
• Endpoints REST : ⏳ À implémenter
• Mise à jour menu : ⏳ À faire
• Tests utilisateur : ⏳ À faire

---

Prochaines Étapes

Backend (Prioritaire)

1. Créer MesCotisationsPaiementBean.java :

   • Auto-détection membre connecté
   • Méthodes charger cotisations/paiements
   • Méthodes initier paiement en ligne / déclarer manuel

2. Implémenter endpoints REST :

   • Cotisations en attente membre
   • Synthèse KPI personnels
   • Historique paiements
   • Gateway paiement en ligne (Wave/Orange/Free/Carte)
   • Déclaration paiement manuel

3. Corriger MembreCotisationBean.java :

   • Auto-détection membre si pas d'ID fourni

Frontend (Complémentaire)

4. Mettre à jour le menu :

   • Modifier "Mes Finances" pour pointer vers nouvelle page
   • Retirer "Historique" redondant
   • Ajouter "Payer en Ligne"

5. Tests utilisateur :

   • MEMBRE_ACTIF : Accès uniquement pages personnelles
   • TRESORIER : Accès pages admin conditionnées

---

Contact

Documentation :

• docs/CHANGEMENTS_PAGES_COTISATIONS_APPLIQUES.md (ce fichier)
• docs/ANALYSE_PAGES_COTISATIONS_UX.md (analyse détaillée)
• docs/UX_MENU_PAR_ROLE.md (recommandations menu)

Code modifié :

• cotisations.xhtml (ligne 89)
• paiement.xhtml (lignes 36, 67, 140)
• paiement-mes-cotisations.xhtml (NOUVEAU - 400+ lignes)