From 27fc3cffb65b4a603c0001f4983fa53610c6118d Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Tue, 10 Mar 2026 16:45:56 +0000
Subject: [PATCH] df

---
 Vue/Ajaxtblisterjoursferiers/index.php | 43 +++++++++++++++-----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/Vue/Ajaxtblisterjoursferiers/index.php b/Vue/Ajaxtblisterjoursferiers/index.php
index 16045bc8..631bfe67 100755
--- a/Vue/Ajaxtblisterjoursferiers/index.php
+++ b/Vue/Ajaxtblisterjoursferiers/index.php
@@ -10,16 +10,18 @@
         </div>
         
         <div class="d-flex align-items-center gap-3">
-            <div class="d-flex align-items-center bg-light rounded-pill px-3 py-1 border shadow-xs">
-                <label for="annee" class="small fw-bold text-muted me-2 mb-0 text-uppercase"><?= _("Année") ?> :</label>
+            <div class="input-group input-group-sm shadow-xs" style="width: 150px;">
+                <span class="input-group-text bg-white border-2 border-end-0 text-muted small fw-bold">
+                    <i class="fas fa-filter me-1"></i> <?= _("ANNÉE") ?>
+                </span>
                 <input type="number" 
-                       class="form-control form-control-sm border-0 bg-transparent fw-bold text-primary p-0" 
+                       class="form-control border-2 border-start-0 fw-bold text-primary" 
                        id="annee" 
                        name="annee" 
                        value="<?= date('Y'); ?>" 
                        min="2020" 
-                       max="<?= date('Y') + 1; ?>" 
-                       style="width: 60px; outline: none; shadow: none;"
+                       max="<?= date('Y'); ?>" 
+                       step="1"
                        onchange="afficheDonneesTableChoisie('Ajaxtblisterjoursferiers');">
             </div>
             <div id="table-buttons" class="d-flex gap-2"></div>
@@ -31,11 +33,10 @@
             <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 text-center">ID</th>
-                        <th class="border-0"><?= _("Date") ?></th>
+                        <th class="ps-4 border-0" style="width: 15%;"><?= _("Centre") ?></th>
+                        <th class="border-0" style="width: 25%;"><?= _("Date") ?></th>
                         <th class="border-0"><?= _("Libellé du jour") ?></th>
-                        <th class="border-0 text-center pe-4"><?= _("Actions") ?></th>
+                        <th class="border-0 text-center pe-4" style="width: 15%;"><?= _("Actions") ?></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -48,8 +49,9 @@
                         $ladate = date('d/m/Y', strtotime($dateFerier));
                     ?>
                     <tr>
-                        <td class="ps-4 fw-medium text-muted small"><?= $this->nettoyer($v['codeSociete']); ?></td>
-                        <td class="text-center text-muted small">#<?= $idData ?></td>
+                        <td class="ps-4 fw-medium text-muted small">
+                            <i class="fas fa-building me-1 opacity-50"></i> <?= $this->nettoyer($v['codeSociete']); ?>
+                        </td>
                         <td>
                             <div class="d-flex align-items-center">
                                 <div class="bg-primary-ghost text-primary rounded-3 p-2 me-3 text-center" style="min-width: 45px;">
@@ -84,12 +86,12 @@
 
 <script>
     $(document).ready(function() {
-        initDataTableReference('#tableLister', 'Jours_Feriers');
+        // Initialisation avec le nom d'export standard
+        initDataTableReference('#tableLister', 'Jours_Feriers_<?= date("Y") ?>');
     });
 </script>
 
 <style>
-    /* Intégration Standard Neutral Pro */
     .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); }
     
@@ -101,12 +103,17 @@
     }
     
     #tableLister tbody td { 
-        height: 60px; 
+        height: 60px; /* Règle d'or Neutral Pro */
         border-bottom: 1px solid #f1f4f6;
     }
 
-    /* Suppression des flèches sur l'input number pour le style */
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
-    input[type=number] { -moz-appearance: textfield; }
+    /* Style spécifique pour l'input d'année dans le header */
+    #annee.form-control {
+        border-color: #dee2e6;
+        transition: all 0.2s;
+    }
+    #annee.form-control:focus {
+        border-color: #212e53;
+        box-shadow: none;
+    }
 </style>
\ No newline at end of file