From 2d3ebf03b581e523c301079d66a664c80a529dd7 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Fri, 3 Apr 2026 10:16:34 +0000
Subject: [PATCH] dsaze

---
 Vue/Recherche/index.php | 160 +++++++++++++++++++++++-----------------
 1 file changed, 91 insertions(+), 69 deletions(-)

diff --git a/Vue/Recherche/index.php b/Vue/Recherche/index.php
index aef59c92..43c0c1c4 100755
--- a/Vue/Recherche/index.php
+++ b/Vue/Recherche/index.php
@@ -1,90 +1,108 @@
-<div class="page-content px-3">
+<div class="page-content">
     <form id="frmrecherche" name="frmrecherche" method="post" action="Recherche/index/">
-        
-        <header class="view-header mb-3">
-            <div class="header-content">
-                <div class="erp-breadcrumb"><?= _("Gestion des contrats") ?> / <?= _("Bénéficiaires") ?></div>
-                <h1 class="view-title text-uppercase">
-                    <i class="fas fa-search me-2 text-muted small"></i><?= _("Recherche Assurés") ?>
-                </h1>
-                <p class="text-secondary small mb-0 mt-1"><?= _("Critères multicritères pour identification rapide") ?></p>
+        <div class="header-section mb-1">
+            <div class="d-flex align-items-center justify-content-between bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
+                <div class="d-flex align-items-center">
+                    <div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;">
+                        <i class="fas fa-search fs-5"></i>
+                    </div>
+                    <div>
+                        <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Recherche Assurés") ?></h4>
+                        <p class="text-secondary small mb-0"><?= _("Retrouvez un bénéficiaire par son numéro, son nom ou ses coordonnées") ?></p>
+                    </div>
+                </div>
             </div>
-            <div class="header-actions">
-                 <button type="submit" id="lancerrecherche" name="lancerrecherche" class="btn btn-primary px-4">
-                    <i class="fas fa-filter me-2"></i> <?= _("Filtrer les résultats") ?>
-                </button>
-            </div>
-        </header>
+        </div>
 
-        <div class="card card-erp mb-3">
-            <div class="card-body py-3">
+        <div class="card shadow-sm border-0 mb-1" style="border-radius: var(--radius-md); background: #ffffff;">
+            <div class="card-body">
                 <div class="row g-3">
-                    <div class="col-md-3">
-                        <label class="lbl-erp"><?= _("Numéro Bénéficiaire") ?></label>
-                        <input class="form-control form-control-sm" type="text" id="numeroBeneficiaire" name="numeroBeneficiaire" autofocus autocomplete="off" placeholder="Ex: 100234...">
+                    <div class="col-md-6 col-lg-3">
+                        <label class="form-label small fw-bold text-muted mb-1"><?= _("Numéro Bénéficiaire") ?></label>
+                        <div class="input-group input-group-merge">
+                            <span class="input-group-text bg-light border-end-0 text-muted"><i class="fas fa-id-card small"></i></span>
+                            <input class="form-control border-start-0 ps-0" type="text" id="numeroBeneficiaire" name="numeroBeneficiaire" autofocus autocomplete="off" placeholder="Ex: 100234...">
+                        </div>
                     </div>
                     
-                    <div class="col-md-3">
-                        <label class="lbl-erp"><?= _("Numéro Famille") ?></label>
-                        <input class="form-control form-control-sm" type="text" id="numeroAdherent" name="numeroAdherent" autocomplete="off">
+                    <div class="col-md-6 col-lg-3">
+                        <label class="form-label small fw-bold text-muted mb-1"><?= _("Numéro Famille") ?></label>
+                        <div class="input-group input-group-merge">
+                            <span class="input-group-text bg-light border-end-0 text-muted"><i class="fas fa-users small"></i></span>
+                            <input class="form-control border-start-0 ps-0" type="text" id="numeroAdherent" name="numeroAdherent" autocomplete="off">
+                        </div>
                     </div>
 
-                    <div class="col-md-3">
-                        <label class="lbl-erp"><?= _("Nom") ?></label>
-                        <input class="form-control form-control-sm text-uppercase" type="text" id="nomBeneficiaire" name="nomBeneficiaire" placeholder="Ex: DOE">
+                    <div class="col-md-6 col-lg-3">
+                        <label class="form-label small fw-bold text-muted mb-1"><?= _("Nom") ?></label>
+                        <input class="form-control" type="text" id="nomBeneficiaire" name="nomBeneficiaire" placeholder="Ex: DOE" style="text-transform: uppercase;">
                     </div>
 
-                    <div class="col-md-3">
-                        <label class="lbl-erp"><?= _("Prénoms") ?></label>
-                        <input class="form-control form-control-sm" type="text" id="prenomsBeneficiaire" name="prenomsBeneficiaire">
+                    <div class="col-md-6 col-lg-3">
+                        <label class="form-label small fw-bold text-muted mb-1"><?= _("Prénoms") ?></label>
+                        <input class="form-control" type="text" id="prenomsBeneficiaire" name="prenomsBeneficiaire">
                     </div>
 
-                    <div class="col-md-3">
-                        <label class="lbl-erp"><?= _("Téléphone portable") ?></label>
-                        <input class="form-control form-control-sm" type="tel" id="telephonePortable" name="telephonePortable">
+                    <div class="col-md-6 col-lg-3">
+                        <label class="form-label small fw-bold text-muted mb-1"><?= _("Téléphone") ?></label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-light border-end-0 text-muted"><i class="fas fa-phone-alt small"></i></span>
+                            <input class="form-control border-start-0 ps-0" type="tel" id="telephonePortable" name="telephonePortable">
+                        </div>
                     </div>
 
-                    <div class="col-md-3">
-                        <label class="lbl-erp">E-mail de contact</label>
-                        <input class="form-control form-control-sm" type="email" id="email" name="email">
+                    <div class="col-md-6 col-lg-3">
+                        <label class="form-label small fw-bold text-muted mb-1">E-mail</label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-light border-end-0 text-muted"><i class="fas fa-at small"></i></span>
+                            <input class="form-control border-start-0 ps-0" type="email" id="email" name="email">
+                        </div>
+                    </div>
+
+                    <div class="col-md-12 col-lg-6 d-flex align-items-end">
+                        <button type="submit" id="lancerrecherche" name="lancerrecherche" class="btn btn-primary w-100 fw-bold py-2 shadow-sm transition-all" style="background-color: var(--color-primary); border: none;">
+                            <i class="fas fa-filter me-2"></i> <?= _("Lancer la recherche") ?>
+                        </button>
                     </div>
                 </div>
             </div>
         </div>
 
         <?php if (isset($derniernumerobeneficiaires) && is_array($derniernumerobeneficiaires) && $derniernumerobeneficiaires['nouveau']>0): ?>
-            <div class="badge-status badge-urgent w-100 p-3 mb-3 d-flex justify-content-start border-0 rounded-1">
-                <i class="fas fa-exclamation-circle me-3 fs-5"></i>
+            <div class="alert alert-custom-urgent d-flex align-items-center mb-4 p-3 shadow-sm" role="alert">
+                <div class="icon-circle bg-danger text-white me-3">
+                    <i class="fas fa-exclamation-triangle"></i>
+                </div>
                 <div>
-                    <div class="fw-bold"><?= _("Carte déclarée perdue") ?></div>
-                    <span class="small opacity-75">Substitution : <strong><?= $derniernumerobeneficiaires['ancien'] ?></strong> <i class="fas fa-arrow-right mx-1"></i> <strong><?= $derniernumerobeneficiaires['nouveau'] ?></strong></span>
+                    <h6 class="alert-heading fw-bold mb-1 text-danger"><?= _("Carte déclarée perdue") ?></h6>
+                    <span class="text-dark">L'ancien numéro <strong><?= $derniernumerobeneficiaires['ancien'] ?></strong> a été remplacé par <strong><?= $derniernumerobeneficiaires['nouveau'] ?></strong>.</span>
                 </div>
             </div>
         <?php endif; ?>
 
-        <div class="card card-erp overflow-hidden">
-            <div class="card-header-erp py-2 bg-light">
-                <span class="lbl-erp mb-0">
-                    <i class="fas fa-list me-2"></i><?= _("Base de données bénéficiaires") ?>
-                </span>
+        <div class="card shadow-sm border-0 overflow-hidden" style="border-radius: var(--radius-md);">
+            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom">
+                <h6 class="mb-0 fw-bold text-primary text-uppercase small">
+                    <i class="fas fa-th-list me-2 text-primary"></i><?= _("Liste des assurés trouvés") ?>
+                </h6>
                 <?php if (isset($beneficiaires) && is_array($beneficiaires)): ?>
-                    <span class="badge-status badge-info"><?= count($beneficiaires) ?> <?= _("résultats") ?></span>
+                    <span class="badge bg-primary-ghost text-primary border-0 rounded-pill"><?= count($beneficiaires) ?> <?= _("résultats") ?></span>
                 <?php endif; ?>
             </div>
             
             <div class="card-body p-0">
                 <div class="table-responsive">
                     <?php if (isset($beneficiaires) && is_array($beneficiaires) && count($beneficiaires) > 0): ?>
-                        <table class="table table-hover align-middle mb-0">
-                            <thead>
+                        <table class="table table-hover align-middle mb-0 custom-table">
+                            <thead class="bg-light-gray text-muted small text-uppercase">
                                 <tr>
-                                    <th class="ps-3"><?= _("Matricule") ?></th>
-                                    <th><?= _("Identité") ?></th>
-                                    <th class="text-center"><?= _("Lien") ?></th>
-                                    <th class="text-center"><?= _("Naissance") ?></th>
-                                    <th class="text-center"><?= _("Sexe") ?></th>
-                                    <th><?= _("Entreprise / Souscripteur") ?></th>
-                                    <th class="text-center pe-3"><?= _("Statut") ?></th>
+                                    <th class="ps-4 border-0 text-center"><?= _("Matricule") ?></th>
+                                    <th class="border-0"><?= _("Identité") ?></th>
+                                    <th class="border-0 text-center"><?= _("Parenté") ?></th>
+                                    <th class="border-0 text-center"><?= _("Date Naissance") ?></th>
+                                    <th class="border-0 text-center"><?= _("Sexe") ?></th>
+                                    <th class="border-0"><?= _("Souscripteur / Entreprise") ?></th>
+                                    <th class="border-0 text-center pe-4"><?= _("Statut") ?></th>
                                 </tr>
                             </thead>
                             <tbody>
@@ -92,40 +110,44 @@
                                     $idBeneficiaire = $this->nettoyer($beneficiaire['id']);
                                     $numeroBeneficiaire = $this->nettoyer($beneficiaire['numeroBeneficiaire']);
                                     $etatCode = $this->nettoyer($beneficiaire['codeEtatBeneficiaire']);
-                                    $statusClass = ($etatCode == 'ACTIF') ? 'badge-valide' : 'badge-inactive';
+                                    $statusBadge = ($etatCode == 'ACTIF') ? 'badge-success-ghost' : 'badge-secondary-ghost';
                                 ?>
-                                    <tr class="cursor-pointer" 
+                                    <tr class="beneficiaire-row" 
                                         onclick="selectionner_beneficiaire(<?= $idBeneficiaire ?>,'<?= $numeroBeneficiaire ?>');"
                                         ondblclick="selectionner_beneficiaire(<?= $idBeneficiaire ?>,'<?= $numeroBeneficiaire ?>');afficher_beneficiaire_id();">
                                         
-                                        <td class="ps-3 fw-bold text-primary"><?= $numeroBeneficiaire ?></td>
+                                        <td class="text-center ps-4">
+                                            <span class="fw-bold text-primary"><?= $numeroBeneficiaire ?></span>
+                                        </td>
                                         <td>
                                             <div class="d-flex align-items-center">
-                                                <div class="initials me-2" style="width: 28px; height: 28px; font-size: 10px;">
+                                                <div class="avatar-sm bg-light text-primary rounded-circle me-2 d-flex align-items-center justify-content-center fw-bold" style="width: 32px; height: 32px; font-size: 0.7rem;">
                                                     <?= substr($beneficiaire['nomBeneficiaire'], 0, 1) ?>
                                                 </div>
                                                 <div>
-                                                    <div class="fw-bold"><?= $this->nettoyer($beneficiaire['nomBeneficiaire']) ?></div>
-                                                    <div class="text-muted small" style="font-size: 11px;"><?= $this->nettoyer($beneficiaire['prenomsBeneficiaire']) ?></div>
+                                                    <div class="fw-bold text-dark mb-0"><?= $this->nettoyer($beneficiaire['nomBeneficiaire']) ?></div>
+                                                    <div class="small text-muted"><?= $this->nettoyer($beneficiaire['prenomsBeneficiaire']) ?></div>
                                                 </div>
                                             </div>
                                         </td>
-                                        <td class="text-center small text-muted"><?= $this->nettoyer($beneficiaire['codeLienParente']) ?></td>
+                                        <td class="text-center small"><?= $this->nettoyer($beneficiaire['codeLienParente']) ?></td>
                                         <td class="text-center small"><?= dateLang($this->nettoyer($beneficiaire['dateNaissance'])) ?></td>
-                                        <td class="text-center small"><?= ($this->nettoyer($beneficiaire['sexe']) == 'M') ? 'M' : 'F' ?></td>
-                                        <td class="small text-truncate" style="max-width: 180px;"><?= $this->nettoyer($beneficiaire['nomClient']) ?></td>
-                                        <td class="text-center pe-3">
-                                            <span class="badge-status <?= $statusClass ?>"><?= $etatCode ?></span>
+                                        <td class="text-center small"><?= ($this->nettoyer($beneficiaire['sexe']) == 'M') ? 'Masc.' : 'Fém.' ?></td>
+                                        <td class="small text-truncate" style="max-width: 200px;"><?= $this->nettoyer($beneficiaire['nomClient']) ?></td>
+                                        <td class="text-center pe-4">
+                                            <span class="badge <?= $statusBadge ?> rounded-pill"><?= $etatCode ?></span>
                                         </td>
                                     </tr>
                                 <?php endforeach; ?>
                             </tbody>
                         </table>
                     <?php else: ?>
-                        <div class="text-center py-5 bg-white">
-                            <i class="fas fa-user-slash fa-2x text-light mb-3"></i>
-                            <h6 class="text-muted fw-bold"><?= _("Aucun bénéficiaire trouvé") ?></h6>
-                            <p class="small text-muted"><?= _("Ajustez vos filtres pour élargir la recherche.") ?></p>
+                        <div class="text-center py-5">
+                            <div class="mb-3">
+                                <i class="fas fa-user-slash fa-3x text-light-gray"></i>
+                            </div>
+                            <h5 class="text-muted"><?= _("Aucun résultat") ?></h5>
+                            <p class="small text-muted px-4"><?= _("Assurez‑vous que vos critères de recherche sont corrects avant de lancer la recherche.") ?></p>
                         </div>
                     <?php endif; ?>
                 </div>