From 51d732588fbc21b936d64b1d87d335f889fde823 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Wed, 21 Jan 2026 09:56:22 +0000
Subject: [PATCH] ffg

---
 Vue/Remboursementclassique/index.php | 105 ++++++++++++++++++++-------
 1 file changed, 80 insertions(+), 25 deletions(-)

diff --git a/Vue/Remboursementclassique/index.php b/Vue/Remboursementclassique/index.php
index 8efd761..31ad4b8 100755
--- a/Vue/Remboursementclassique/index.php
+++ b/Vue/Remboursementclassique/index.php
@@ -1,35 +1,90 @@
 <?php 
-	$this->titre = "INTER SANTE - Remboursement classique"; 
+    $this->titre = "INTER SANTE - Remboursement classique"; 
 ?>
 
-<input class="sr-only" id="nomForm" name="nomForm"  type="text" value= "remboursementClassic" >
+<input id="div_liste" class="visually-hidden" id="nomForm" name="nomForm" type="text" value="remboursementClassic">
+<input id="filtre" name="filtre" class="visually-hidden" type="text" value="0" readonly>
 
-<legend> <?= _("Liste des remboursements Hors Tiers Payant") ?></legend>
+<div class="container-fluid py-4 animate__animated animate__fadeIn">
+    
+    <div class="d-flex align-items-center mb-4">
+        <div class="bg-primary text-white p-3 rounded-3 shadow-sm me-3">
+            <i class="fas fa-hand-holding-usd fa-2x"></i>
+        </div>
+        <div>
+            <h1 class="mb-0 fw-bold text-uppercase text-primary"><?= _("Gestion des Remboursements") ?></h1>
+            <p class="text-muted mb-0"><?= _("Liste des dossiers Hors Tiers Payant") ?></p>
+        </div>
+    </div>
 
-<table class="table table-responsive table-condensed" style='font-size:9pt;'>
-	<tbody>	
-		<tr> 
-			<td  width="10%" > <?= _("Période du") ?>  </td>
-			<td  width="20%" ><INPUT style='text-align:center; font-size:10pt;' class="form-control datepicker" TYPE="text" id="d1" NAME="d1" value="<?= dateLang($_SESSION['dUneSemaineAvant_C'],$_SESSION['lang']) ?>"  ></td>
+    <div class="card border-0 shadow-sm mb-4">
+        <div class="card-body p-3">
+            <div class="row g-3 align-items-end">
+                
+                <div class="col-xl-4 col-lg-5">
+                    <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Période de recherche") ?></label>
+                    <div class="input-group">
+                        <span class="input-group-text bg-white"><i class="fas fa-calendar-alt text-primary"></i></span>
+                        <input type="text" id="d1" name="d1" class="form-control datepicker text-center fw-bold" 
+                               value="<?= dateLang($_SESSION['dUneSemaineAvant_C'],$_SESSION['lang']) ?>" placeholder="<?= _("Du") ?>">
+                        <span class="input-group-text bg-light fw-bold px-3"><?= _("au") ?></span>
+                        <input type="text" id="d2" name="d2" class="form-control datepicker text-center fw-bold" 
+                               value="<?= dateCouranteLang($_SESSION['lang']) ?>" placeholder="<?= _("Au") ?>">
+                    </div>
+                </div>
 
-			<td  width="10%" align="center" > <?= _("au") ?> </td>
-			<td width="20%" ><INPUT style='text-align:center; font-size:10pt;'  class="form-control datepicker" TYPE="text" id="d2" NAME="d2" value="<?= dateCouranteLang($_SESSION['lang']) ?>" ></td>
+                <div class="col-xl-6 col-lg-7">
+                    <label class="form-label small fw-bold text-muted text-uppercase d-none d-lg-block">&nbsp;</label>
+                    <div class="d-flex flex-wrap gap-2">
+                        <button type="button" class="btn btn-outline-primary fw-bold flex-grow-1" onclick="lister_dossiers_classiques('0');">
+                            <i class="fas fa-list me-2"></i><?= _("Tous") ?>
+                        </button>
+                        <button type="button" class="btn btn-outline-primary fw-bold flex-grow-1" onclick="lister_dossiers_classiques('1');">
+                            <i class="fas fa-user-check me-2"></i><?= _("Assurés") ?>
+                        </button>
+                        <button type="button" class="btn btn-outline-primary fw-bold flex-grow-1" onclick="lister_dossiers_classiques('2');">
+                            <i class="fas fa-file-contract me-2"></i><?= _("Polices") ?>
+                        </button>
+                    </div>
+                </div>
 
-			<td> </td>
-			<td width="10%" >  <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:lister_dossiers_classiques('0');"><?= _("Tous...") ?></button> </td>
-			<td> </td>
-			<td width="10%" >  <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:lister_dossiers_classiques('1');"><?= _("Filtre Assurés...") ?></button> </td>
-			<td> </td>
-			<td width="10%" >  <button style='font-size:10pt;' type="button" class="form-control btn btn-primary" onclick="javascript:lister_dossiers_classiques('2');"><?= _("Filtre Polices...") ?></button> </td>
-			<td> </td>
-			<td > <button style='font-size:10pt;' type="button" class="form-control btn btn-success" onclick="javascript:lister_dossiers_classiques_export();"><?= _("Exporter...") ?></button> </td>
-		</tr>			
-	</tbody>
-</table>	
+                <div class="col-xl-2 col-lg-12">
+                    <button type="button" class="btn btn-success w-100 fw-bold shadow-sm" onclick="lister_dossiers_classiques_export();">
+                        <i class="fas fa-file-excel me-2"></i><?= _("Exporter") ?>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<div id="div_export_a"></div>	
+    <div id="container_libelle_filtre" class="mb-3 animate__animated animate__fadeIn" style="display:none;">
+        <div class="alert alert-info py-2 px-3 d-flex align-items-center rounded-pill border-0 shadow-xs">
+            <i class="fas fa-filter me-2"></i>
+            <span class="small fw-bold text-uppercase me-2"><?= _("Filtre actif :") ?></span>
+            <input id="libelleFiltre" name="libelleFiltre" class="form-control form-control-sm bg-transparent border-0 fw-bold p-0 shadow-none" 
+                   type="text" value="" readonly style="color: inherit;">
+        </div>
+    </div>
 
-<input id="libelleFiltre" 	name="libelleFiltre" 	style="text-align:center; font-size:11pt; background-color:#027BE3;color:white;" class="form-control" type="text" value="" readonly>
-<input id="filtre" 			name="filtre" 			class="sr-only" type="text" value="0" readonly>
+    <div id="div_export_a" class="mb-3"></div>
+    <div id="div_dossiers" class="bg-white rounded shadow-sm p-3 min-vh-50">
+        <div class="text-center text-muted py-5">
+            <i class="fas fa-search fa-3x mb-3 opacity-25"></i>
+            <p><?= _("Utilisez les filtres ci-dessus pour afficher les dossiers.") ?></p>
+        </div>
+    </div>
+</div>
 
-<div id="div_dossiers"></div>	
\ No newline at end of file
+<style>
+    .shadow-xs { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+    .min-vh-50 { min-height: 400px; }
+    .input-group-text { border-color: #dee2e6; }
+    .datepicker { cursor: pointer !important; background-color: #fff !important; }
+    
+    /* Animation du bouton au survol */
+    .btn-outline-primary:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.15);
+        transition: all 0.2s;
+    }
+</style>
\ No newline at end of file