From f641ccc519f51b3f49b174d3a3fb3f9150940745 Mon Sep 17 00:00:00 2001
From: Youssef <youssef.kaouachi@gmail.com>
Date: Tue, 30 Jun 2026 15:11:16 +0200
Subject: [PATCH] feat: add search filters to categories and equipements lists

---
 .../parametrage/categories_list.html          | 19 ++++++++++++++++---
 .../parametrage/equipements_list.html         | 19 ++++++++++++++++---
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/as-talange-web/src/main/resources/templates/parametrage/categories_list.html b/as-talange-web/src/main/resources/templates/parametrage/categories_list.html
index ce7c7b5..22882cf 100644
--- a/as-talange-web/src/main/resources/templates/parametrage/categories_list.html
+++ b/as-talange-web/src/main/resources/templates/parametrage/categories_list.html
@@ -20,9 +20,12 @@
         <div class="flex-1 overflow-auto p-6">
             <div class="flex justify-between items-center mb-6">
                 <h3 class="text-xl font-bold text-gray-900">Liste des Catégories</h3>
-                <a th:href="@{/categories/new}" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700">
-                    + Nouvelle Catégorie
-                </a>
+                <div class="flex items-center space-x-4">
+                    <input type="text" id="searchInput" placeholder="Rechercher une catégorie..." class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none w-64">
+                    <a th:href="@{/categories/new}" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700">
+                        + Nouvelle Catégorie
+                    </a>
+                </div>
             </div>
 
             <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
@@ -64,5 +67,15 @@
             </div>
         </div>
     </main>
+    <script>
+        document.getElementById('searchInput').addEventListener('keyup', function() {
+            let filter = this.value.toLowerCase();
+            let rows = document.querySelectorAll('tbody tr.hover\\:bg-gray-50');
+            rows.forEach(row => {
+                let text = row.textContent.toLowerCase();
+                row.style.display = text.includes(filter) ? '' : 'none';
+            });
+        });
+    </script>
 </body>
 </html>
diff --git a/as-talange-web/src/main/resources/templates/parametrage/equipements_list.html b/as-talange-web/src/main/resources/templates/parametrage/equipements_list.html
index 7bda09a..ae2a039 100644
--- a/as-talange-web/src/main/resources/templates/parametrage/equipements_list.html
+++ b/as-talange-web/src/main/resources/templates/parametrage/equipements_list.html
@@ -20,9 +20,12 @@
         <div class="flex-1 overflow-auto p-6">
             <div class="flex justify-between items-center mb-6">
                 <h3 class="text-xl font-bold text-gray-900">Liste des Équipements</h3>
-                <a th:href="@{/equipements/new}" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700">
-                    + Nouvel Équipement
-                </a>
+                <div class="flex items-center space-x-4">
+                    <input type="text" id="searchInput" placeholder="Rechercher un équipement..." class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none w-64">
+                    <a th:href="@{/equipements/new}" class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700">
+                        + Nouvel Équipement
+                    </a>
+                </div>
             </div>
                 <table class="w-full text-left border-collapse">
                     <thead>
@@ -51,5 +54,15 @@
             </div>
         </div>
     </main>
+    <script>
+        document.getElementById('searchInput').addEventListener('keyup', function() {
+            let filter = this.value.toLowerCase();
+            let rows = document.querySelectorAll('tbody tr.hover\\:bg-gray-50');
+            rows.forEach(row => {
+                let text = row.textContent.toLowerCase();
+                row.style.display = text.includes(filter) ? '' : 'none';
+            });
+        });
+    </script>
 </body>
 </html>