From aeca4a9c306c8805f23726e8c9f7c5889ac7ef34 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Wed, 11 Mar 2026 11:27:15 +0000
Subject: [PATCH] df

---
 Vue/Ajaxtbajouterentetetrancheage/index.php  | 125 ++++++++++++++----
 Vue/Ajaxtblisterentetetrancheage/index.php   | 129 +++++++++++--------
 Vue/Ajaxtbmodifierentetetrancheage/index.php | 124 +++++++++++++-----
 3 files changed, 275 insertions(+), 103 deletions(-)

diff --git a/Vue/Ajaxtbajouterentetetrancheage/index.php b/Vue/Ajaxtbajouterentetetrancheage/index.php
index ed997226..31911c54 100755
--- a/Vue/Ajaxtbajouterentetetrancheage/index.php
+++ b/Vue/Ajaxtbajouterentetetrancheage/index.php
@@ -1,23 +1,102 @@
-<form id="formData">
-	<legend id="titre_formData"><?= _("Ajouter des données") ?></legend>
-	<table class="table table-responsive table-condensed">
-		<tbody>	
-			<tr> 
-				<td width="10%" align="center" class="required"><?= _("Libellé") ?></td>
-				<td ><INPUT class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF"></td>
-				
-				<td width="10%" align="center"><?= _("Libellé Eng") ?></td>
-				<td ><INPUT class="form-control majuscule" TYPE="text" id="libelleEng" NAME="libelleEng"></td>
-			</tr>
-			<tr> 
-				<td width="10%" align="center" class="required"><?= _("Garant") ?></td>
-				<td colspan="5" >
-					<select class="form-control selectpicker" data-live-search="true" id="codeGcAssureur" NAME="codeGcAssureur" required AUTOCOMPLETE="OFF" autofocus>
-						<?php liste_options($garants,""); ?>						
-					</SELECT>
-				</td>
-				
-			</tr>
-		</tbody>
-	</table>	
-</form>
\ No newline at end of file
+<div class="card border-0 shadow-sm border-start border-4 border-primary">
+    <div class="card-header bg-white py-3 border-bottom">
+        <h6 class="mb-0 fw-bold text-uppercase text-success small" id="titre_formData">
+            <i class="fas fa-hourglass-start me-2"></i><?= _("Ajouter un libellé d'entête de tranche d'âge") ?>
+        </h6>
+    </div>
+    
+    <div class="card-body p-4">
+        <form id="formData" class="container-fluid p-0">
+            <div class="row g-4">
+                
+                <div class="col-md-6">
+                    <label class="form-label fw-bold text-muted small text-uppercase required"><?= _("Libellé (FR)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <img src="Bootstrap_new/images/new/france.png" width="16" alt="FR">
+                        </span>
+                        <input type="text" 
+                               class="form-control border-2 border-start-0 majuscule fw-bold" 
+                               id="libelle" 
+                               name="libelle" 
+                               required 
+                               autocomplete="OFF">
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <label class="form-label fw-bold text-muted small text-uppercase"><?= _("Libellé (Eng)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <img src="Bootstrap_new/images/new/england.png" width="16" alt="EN">
+                        </span>
+                        <input type="text" 
+                               class="form-control border-2 border-start-0 majuscule" 
+                               id="libelleEng" 
+                               name="libelleEng"
+                               autocomplete="OFF">
+                    </div>
+                </div>
+
+                <div class="col-md-12">
+                    <label class="form-label fw-bold text-muted small text-uppercase required"><?= _("Garant") ?></label>
+                    <div class="shadow-xs">
+                        <select class="selectpicker form-control border-2" 
+                                data-live-search="true" 
+                                data-container="body" 
+                                id="codeGcAssureur" 
+                                name="codeGcAssureur" 
+                                required>
+                            <?php liste_options($garants, ""); ?>
+                        </select>
+                    </div>
+                </div>
+
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+    $(document).ready(function() {
+        // 1. Initialisation du SelectPicker selon le standard
+        $('.selectpicker').selectpicker();
+
+        // 2. Règle d'Or UX : Focus différé de 200ms sur le premier champ modifiable
+        setTimeout(function() {
+            $('#libelle').focus();
+        }, 200);
+    });
+</script>
+
+<style>
+    /* Identité Visuelle Neutral Pro */
+    .border-primary { border-color: #212e53 !important; }
+    .shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+    
+    .form-control.border-2, .input-group-text.border-2 { 
+        border-width: 2px !important; 
+    }
+
+    .majuscule { text-transform: uppercase; }
+
+    .required:after {
+        content: " *";
+        color: #dc3545;
+        font-weight: bold;
+    }
+
+    /* Harmonisation du bouton SelectPicker avec le style 2px */
+    .bootstrap-select > .dropdown-toggle {
+        border-width: 2px !important;
+        border-color: #dee2e6 !important;
+        height: 42px !important;
+        background-color: #fff !important;
+    }
+
+    .bootstrap-select > .dropdown-toggle:focus {
+        border-color: #212e53 !important;
+        outline: none !important;
+        box-shadow: 0 0 0 0.25rem rgba(33, 46, 83, 0.1) !important;
+    }
+</style>
\ No newline at end of file
diff --git a/Vue/Ajaxtblisterentetetrancheage/index.php b/Vue/Ajaxtblisterentetetrancheage/index.php
index 2ef5e383..24622695 100755
--- a/Vue/Ajaxtblisterentetetrancheage/index.php
+++ b/Vue/Ajaxtblisterentetetrancheage/index.php
@@ -1,55 +1,82 @@
-<?php
-	$nbreTotal = count($tabentete);
-	
-	if($nbreTotal < 10){
-		$nbreTotal = '0'.$nbreTotal;	
-	}else{
-		$nbreTotal =  format_N($nbreTotal);
-	}
+<?php 
+    // Préparation du compteur Standard Neutral Pro
+    $nbreTotal = count($tabentete);
 ?>
 
-<?php $superUser = $_SESSION['superUser']; ?>
+<div class="card border-0 shadow-sm overflow-hidden">
+    <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
+            <h6 class="mb-0 fw-bold text-uppercase text-primary small">
+                <i class="fas fa-hourglass-half me-2"></i><?= _("Configuration des Tranches d'Âge") ?>
+            </h6>
+            <span class="badge bg-primary-ghost text-primary ms-3 px-3 py-2 rounded-pill fw-bold" id="badge-total">
+                <?= $nbreTotal ?> <?= _("Lignes") ?>
+            </span>
+        </div>
+        <div id="table-buttons" class="d-flex gap-2"></div>
+    </div>
 
-<table style="margin: auto" class="table-responsive">
-	<tbody>
-		<td><input class="form-control" style="text-align: center; font-size:10pt;" type="text" id="nbreTotal" name="nbreTotal" value="<?= _("Lignes Total").": ". $nbreTotal; ?>" readonly> </td>
-	</tbody>
-</table>
-<input type="hidden" id="total" value="<?= $nbreTotal; ?>">
-<table id="tableLister" class="table table-striped table-bordered table-hover table-condensed table-responsive caompact">
-	<thead>
-	  <tr>
-		<th class="text-center"><?= _("Centre gestion") ?></th>  
-		<th class="text-center"><?= _("Garant") ?></th>
-		<th class="text-center">Code</th>
-		<th class="text-center"><?= _("Libellé") ?></th>
-		<th class="text-center"><?= _("Modifier") ?></th>
-		
-	  </tr>
-	</thead>
-	<tbody>
-		<?php foreach ($tabentete as $v):
-			$idData = $this->nettoyer($v['id']);
-			
-			$libelle = $this->nettoyer($v['libelle']);
-			
-			if (est_anglophone()){
-				$libelle = $this->nettoyer($v['libelleEng']);
+    <div class="card-body p-0">
+        <div class="table-responsive">
+            <table id="tableLister" class="table table-hover align-middle mb-0" style="width:100%">
+                <thead class="bg-light text-muted small text-uppercase">
+                    <tr>
+                        <th class="ps-4 border-0"><?= _("Centre") ?></th>
+                        <th class="border-0"><?= _("Garant") ?></th>
+                        <th class="border-0">Code</th>
+                        <th class="border-0"><?= _("Libellé") ?></th>
+                        <th class="border-0 text-center pe-4"><?= _("Actions") ?></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($tabentete as $v):
+                        $idData = $this->nettoyer($v['id']);
+                        $libelle = est_anglophone() ? $this->nettoyer($v['libelleEng']) : $this->nettoyer($v['libelle']);
+                    ?>
+                    <tr>
+                        <td class="ps-4 fw-medium text-muted small">
+                            <?= $this->nettoyer($v['codeSociete']) ?>
+                        </td>
+                        <td class="fw-bold text-dark text-uppercase">
+                            <span class="badge bg-white border text-primary shadow-xs px-2">
+                                <i class="fas fa-shield-alt me-1 opacity-50"></i> <?= $this->nettoyer($v['garant']) ?>
+                            </span>
+                        </td>
+                        <td>
+                            <code class="fw-bold text-primary"><?= $this->nettoyer($v['codeEnteteTrancheAge']) ?></code>
+                        </td>
+                        <td class="fw-medium">
+                            <?= $libelle ?>
+                        </td>
+                        <td class="text-center pe-4">
+                            <button type="button" 
+                                    class="btn btn-outline-primary btn-sm px-3 rounded-pill fw-bold shadow-xs" 
+                                    onclick="formModifTableRef(<?= $idData; ?>);">
+                                <i class="fas fa-edit me-1"></i> <?= _("Modifier") ?>
+                            </button>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
 
-			}
-		?>
-		  <tr valign="top">
-			<td class="text-center" width="15%"><?= $this->nettoyer($v['codeSociete']);; ?>   
-			<td class="text-center majuscule" width="20%"><?= $this->nettoyer($v['garant']) ?></td>
-		  	<td class="text-center" width="20%"><?= $this->nettoyer($v['codeEnteteTrancheAge']) ?></td>
-			<td class="text-center" width="20%"><?= $libelle ?></td>
-			
-			<td class="text-center" width="10%">
-				<button style="width:100%" class ="form-control btn btn-primary" type="button" id="btn-editer" name="Modifier"
-				onclick="JAVASCRIPT:formModifTableRef(<?= $idData; ?>);" ><?= _("Modifier") ?></button>
-			</td>
-			
-		  </tr>
-		<?php endforeach; ?>
-	</tbody>
-</table>
\ No newline at end of file
+<script>
+    $(document).ready(function() {
+        // Initialisation standard avec exports et compteur
+        initDataTableReference('#tableLister', 'Tranches_Age_Entete');
+    });
+</script>
+
+<style>
+    /* Rappel des règles d'or Neutral Pro */
+    #tableLister tbody td { 
+        height: 60px; 
+        border-bottom: 1px solid #f1f4f6; 
+    }
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+    .shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+    .text-primary { color: #212e53 !important; }
+</style>
\ No newline at end of file
diff --git a/Vue/Ajaxtbmodifierentetetrancheage/index.php b/Vue/Ajaxtbmodifierentetetrancheage/index.php
index fb133231..ca89b910 100755
--- a/Vue/Ajaxtbmodifierentetetrancheage/index.php
+++ b/Vue/Ajaxtbmodifierentetetrancheage/index.php
@@ -1,29 +1,95 @@
-<form id="formData">
-<legend id="titre_formData"><?= _("Modification des données") ?></legend>
-<INPUT class="sr-only" TYPE="text" id = "id" name = "id" value="<?=$tabentetetrancheage['id']?>">
-<table class="table table-responsive table-condensed">
-	<tbody>	
-		<tr> 
-			<td width="10%" align="center" >Code</td>
-			<td width="10%" ><INPUT class="form-control majuscule" TYPE="text" id="codeEnteteTrancheAge" NAME="codeEnteteTrancheAge" 
-			value="<?=$tabentetetrancheage['codeEnteteTrancheAge']?>" disabled >
-			</td>
-            
-			<td width="10%" align="center" class="required"><?= _("Libellé") ?></td>
-            <td  ><INPUT class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF" value="<?=$tabentetetrancheage['libelle']?>"></td>
-            
-            <td width="10%" align="center"><?= _("Libellé Eng") ?></td>
-            <td ><INPUT class="form-control majuscule" TYPE="text" id="libelleEng" NAME="libelleEng" value="<?=$tabentetetrancheage['libelleEng']?>"></td>
-		</tr>
-		<tr> 
-			<td width="10%" align="center" ><?= _("Garant") ?></td>
-            <td colspan="5" >
-				<select class="form-select" id="codeGcAssureur" NAME="codeGcAssureur" readonly>
-					<?php liste_options($garants,$tabentetetrancheage['codeGcAssureur']); ?>						
-				</SELECT>
-			</td>
-			
-		</tr>
-	</tbody>
-</table>	
-</form>
\ No newline at end of file
+<div class="card border-0 shadow-sm border-start border-4 border-primary">
+    <div class="card-header bg-white py-3 border-bottom">
+        <h6 class="mb-0 fw-bold text-uppercase text-primary small" id="titre_formData">
+            <i class="fas fa-edit me-2"></i><?= _("Modification des données de l'entête des tranches d'âge") ?>
+        </h6>
+    </div>
+    
+    <div class="card-body p-4">
+        <form id="formData" class="container-fluid p-0">
+            <input type="hidden" id="id" name="id" value="<?= $this->nettoyer($tabentetetrancheage['id']) ?>">
+
+            <div class="row g-4">
+                
+                <div class="col-md-2">
+                    <label class="form-label fw-bold text-muted small text-uppercase">Code</label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-light border-2 border-end-0"><i class="fas fa-lock text-muted"></i></span>
+                        <input type="text" class="form-control border-2 border-start-0 majuscule fw-bold bg-light" 
+                               id="codeEnteteTrancheAge" name="codeEnteteTrancheAge" 
+                               value="<?= $this->nettoyer($tabentetetrancheage['codeEnteteTrancheAge']) ?>" disabled>
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <label class="form-label fw-bold text-muted small text-uppercase required"><?= _("Libellé (Fr)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <img src="Bootstrap_new/images/new/france.png" width="16" alt="FR">
+                        </span>
+                        <input type="text" class="form-control border-2 border-start-0 majuscule fw-bold" 
+                               id="libelle" name="libelle" required autocomplete="OFF" 
+                               value="<?= $this->nettoyer($tabentetetrancheage['libelle']) ?>">
+                    </div>
+                </div>
+
+                <div class="col-md-5">
+                    <label class="form-label fw-bold text-muted small text-uppercase"><?= _("Libellé (Eng)") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-white border-2 border-end-0">
+                            <img src="Bootstrap_new/images/new/england.png" width="16" alt="EN">
+                        </span>
+                        <input type="text" class="form-control border-2 border-start-0 majuscule" 
+                               id="libelleEng" name="libelleEng" 
+                               value="<?= $this->nettoyer($tabentetetrancheage['libelleEng']) ?>">
+                    </div>
+                </div>
+
+                <div class="col-md-12">
+                    <label class="form-label fw-bold text-muted small text-uppercase"><?= _("Garant") ?></label>
+                    <div class="input-group shadow-xs">
+                        <span class="input-group-text bg-light border-2 border-end-0"><i class="fas fa-shield-alt text-muted"></i></span>
+                        <select class="selectpicker form-control border-2 bg-light" 
+                                id="codeGcAssureur" name="codeGcAssureur" 
+                                data-container="body" disabled>
+                            <?php liste_options($garants, $this->nettoyer($tabentetetrancheage['codeGcAssureur']), true); ?>
+                        </select>
+                    </div>
+                    <small class="text-muted mt-1 d-block"><i class="fas fa-info-circle me-1"></i> <?= _("Le garant ne peut pas être modifié après la création.") ?></small>
+                </div>
+
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+    $(document).ready(function() {
+        // Initialisation SelectPicker
+        $('.selectpicker').selectpicker();
+
+        // Règle d'Or Neutral Pro : Focus différé de 200ms sur le champ FR
+        setTimeout(function() {
+            $('#libelle').focus();
+        }, 200);
+    });
+</script>
+
+<style>
+    /* Identité Visuelle Neutral Pro */
+    .border-primary { border-color: #212e53 !important; }
+    .shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+    .form-control.border-2, .input-group-text.border-2 { border-width: 2px !important; }
+    .majuscule { text-transform: uppercase; }
+    .required:after { content: " *"; color: #dc3545; font-weight: bold; }
+    
+    /* Harmonisation SelectPicker désactivé */
+    .bootstrap-select.disabled {
+        background-color: #f8fafc !important;
+        opacity: 1 !important;
+    }
+    .bootstrap-select > .dropdown-toggle.disabled {
+        border-color: #dee2e6 !important;
+        background-color: #f8fafc !important;
+    }
+</style>
\ No newline at end of file