From 6f2b7c5611192f493aabd80bc37848ba5de3fe3d Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Thu, 26 Mar 2026 10:50:59 +0000
Subject: [PATCH] sdr

---
 Vue/Fichebeneficiaire/index.php | 99 ++++++++++++++++++++-------------
 1 file changed, 59 insertions(+), 40 deletions(-)

diff --git a/Vue/Fichebeneficiaire/index.php b/Vue/Fichebeneficiaire/index.php
index f9bf2a2..8bcc223 100644
--- a/Vue/Fichebeneficiaire/index.php
+++ b/Vue/Fichebeneficiaire/index.php
@@ -89,69 +89,88 @@
     </div>
 
 	<form name="formfichebeneficiaire" id="formfichebeneficiaire" method="POST" class="container-fluid py-3">
-		<div class="d-flex justify-content-between align-items-center mb-4 bg-light p-3 rounded shadow-sm border-start border-primary border-4">
-			<div class="card">
-				<h4 class="h4 mb-0 text-secondary">
-					<?= _("Bénéficiaire") ?> : <span class="fw-bold"><?= $beneficiaire['numeroBeneficiaire'] ?></span>
-				</h4>
-				<small class="text-muted"><?= _("Date Effet") ?> : <?= dateLang($this->nettoyer($beneficiaire['dateEffet']), $_SESSION['lang']) ?></small>
+		<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 bg-white p-4 rounded shadow-sm border-start border-primary border-5">
+			<div class="d-flex align-items-center mb-2 mb-lg-0">
+				<div class="bg-primary-subtle text-primary rounded-circle p-3 me-3 d-none d-md-flex">
+					<i class="fa-solid fa-user-gear fa-2x"></i>
+				</div>
+				<div>
+					<h4 class="h4 mb-1 text-dark fw-bold">
+						<?= _("Bénéficiaire") ?> : <span class="text-primary"><?= $beneficiaire['numeroBeneficiaire'] ?></span>
+					</h4>
+					<div class="d-flex align-items-center text-muted small">
+						<i class="fa-regular fa-calendar-check me-2"></i>
+						<?= _("Date Effet") ?> : <span class="fw-bold ms-1"><?= dateLang($this->nettoyer($beneficiaire['dateEffet']), $_SESSION['lang']) ?></span>
+					</div>
+				</div>
 			</div>
 
-			<div class="card">
+			<div class="flex-grow-1 px-lg-4 my-3 my-lg-0" style="max-width: 600px;">
 				<?php if($nombreGed > 0): ?>
-					<div class="alert alert-success d-flex align-items-center shadow-sm border-0 py-3" style="border-radius: 10px;">
-						<i class="fas fa-check-double fa-2x me-3"></i>
+					<div class="alert alert-success d-flex align-items-center m-0 py-2 px-3 border-0 shadow-sm" style="border-radius: 12px; background-color: #e8f5e9;">
+						<i class="fas fa-check-circle fa-2x text-success me-3"></i>
 						<div class="flex-grow-1">
-							<h6 class="mb-1 fw-bold fs-5">
-								<?= est_anglophone() ? 'Identity Documents Verified' : 'Documents d’identité vérifiés'; ?>
+							<h6 class="mb-0 fw-bold small text-success">
+								<?= est_anglophone() ? 'Verified Folder' : 'Dossier Vérifié'; ?>
 							</h6>
-							<span class="small d-block opacity-75" style="font-size: 10.5pt;">
-								<?= est_anglophone() 
-									? 'The member’s digital folder is up to date (ID card, Passport, Birth certificate...).' 
-									: 'Le dossier numérique de l’adhérent est à jour (CNI, Passeport, Acte de naissance...).'; ?>
-							</span>
+							<small class="d-block text-dark opacity-75" style="font-size: 8.5pt;">
+								<?= est_anglophone() ? 'Identity documents are up to date.' : 'Les documents d’identité sont à jour.'; ?>
+							</small>
 						</div>
-						<a href="Gedbeneficiaireprod/" class="btn btn-success btn-sm fw-bold ms-3 px-3">
-							<i class="fas fa-folder-open me-2"></i><?= _("Consulter la GED") ?>
+						<a href="Gedbeneficiaireprod/" class="btn btn-success btn-sm rounded-pill px-3 ms-2">
+							<i class="fas fa-eye me-1"></i>
 						</a>
 					</div>
-					
 				<?php else: ?>
-					<div class="alert alert-danger d-flex align-items-center shadow-sm border-0 py-3 animate__animated animate__pulse animate__infinite" style="border-radius: 10px;">
-						<i class="fas fa-exclamation-triangle fa-2x me-3"></i>
+					<div class="alert alert-danger d-flex align-items-center m-0 py-2 px-3 border-0 shadow-sm animate__animated animate__pulse animate__infinite" style="border-radius: 12px; background-color: #ffebee;">
+						<i class="fas fa-exclamation-circle fa-2x text-danger me-3"></i>
 						<div class="flex-grow-1">
-							<h6 class="mb-1 fw-bold fs-5">
-								<?= est_anglophone() ? 'Missing Documents' : 'Documents manquants'; ?>
+							<h6 class="mb-0 fw-bold small text-danger">
+								<?= est_anglophone() ? 'Incomplete File' : 'Dossier Incomplet'; ?>
 							</h6>
-							<span class="small d-block fw-bold" style="font-size: 10.5pt;">
-								<?= est_anglophone() 
-									? 'Action required: Please upload the identity documents to complete this member’s file.' 
-									: 'Action requise : Veuillez joindre les pièces justificatives pour finaliser ce dossier.'; ?>
-							</span>
+							<small class="d-block text-dark fw-bold" style="font-size: 8.5pt;">
+								<?= est_anglophone() ? 'Missing ID documents.' : 'Pièces d’identité manquantes.'; ?>
+							</small>
 						</div>
-						<a href="Gedbeneficiaireprod/" class="btn btn-danger btn-sm fw-bold ms-3 px-3 shadow-sm">
-							<i class="fas fa-upload me-2"></i><?= _("Ouvrir la GED") ?>
+						<a href="Gedbeneficiaireprod/" class="btn btn-danger btn-sm rounded-pill px-3 ms-2 shadow-sm">
+							<i class="fas fa-upload me-1"></i>
 						</a>
 					</div>
 				<?php endif; ?>
 			</div>
-			
+
 			<div class="text-end">
 				<?php 
-					$statusClass = "bg-danger"; $statusText = _("Inconnu");
-					if ($dateEffetCouvert == "0") { $statusText = _("Non renouvelé"); }
+					$statusClass = "bg-danger"; $statusIcon = "fa-circle-xmark"; $statusText = _("Inconnu");
+					if ($dateEffetCouvert == "0") { 
+						$statusText = _("Non renouvelé"); 
+						$statusIcon = "fa-calendar-minus";
+					}
 					elseif ($estcouvert) {
-						if ($beneficiaire['codeEtatBeneficiaire'] == "V") { $statusClass = "bg-success"; $statusText = $etatbeneficiaire; }
-						else { $statusText = $etatbeneficiaire; }
-					} elseif ($estsorti) { $statusText = _("Retiré"); }
-					else { $statusText = _("Expiré"); }
+						if ($beneficiaire['codeEtatBeneficiaire'] == "V") { 
+							$statusClass = "bg-success"; 
+							$statusIcon = "fa-shield-check";
+							$statusText = $etatbeneficiaire; 
+						}
+						else { 
+							$statusText = $etatbeneficiaire; 
+							$statusIcon = "fa-circle-exclamation";
+						}
+					} elseif ($estsorti) { 
+						$statusText = _("Retiré"); 
+						$statusIcon = "fa-user-slash";
+					}
+					else { 
+						$statusText = _("Expiré"); 
+						$statusIcon = "fa-clock-rotate-left";
+					}
 				?>
-				<span class="badge <?= $statusClass ?> fs-6 shadow-sm p-2 px-3">
-					<i class="fa-solid fa-circle-info me-1"></i> <?= $statusText ?>
+				<div class="small text-muted text-uppercase fw-bold mb-1" style="font-size: 7pt; letter-spacing: 1px;"><?= _("Statut Couverture") ?></div>
+				<span class="badge <?= $statusClass ?> fs-6 shadow-sm p-2 px-4 rounded-pill d-inline-flex align-items-center">
+					<i class="fa-solid <?= $statusIcon ?> me-2"></i> <?= $statusText ?>
 				</span>
 			</div>
 		</div>
-
 		<div class="row g-4">
 			<div class="col-lg-8">
 				<div class="card shadow-sm h-100">