Actualiser index.html

index.html

@@ -1756,44 +1756,74 @@
     </section>
 
     <!-- ===== CONFIGURATION PAGE ===== -->
-    <section class="page" id="page-config">
+<section class="page" id="page-config">
         <div class="page-header">
             <h2>🔧 Configuration</h2>
         </div>
-        <div class="settings-card">
-            <h4>📍 Emplacements de stockage</h4>
-            <p class="settings-hint">Gère les emplacements disponibles pour ranger tes produits (Frigo, Cave, Bar...).</p>
-            <div id="locations-list-container" style="margin-top:10px">
-                <p class="settings-hint">Chargement…</p>
-            </div>
-            <div class="form-group mt-2">
-                <label>➕ Nouvel emplacement</label>
-                <div class="barcode-input-row">
-                    <input type="text" id="new-location-icon" class="form-input" style="max-width:70px;text-align:center" placeholder="📦" maxlength="4">
-                    <input type="text" id="new-location-label" class="form-input" placeholder="Es: Cave, Bar, Garage..." onkeydown="if(event.key==='Enter'){event.preventDefault();addLocation()}">
-                    <button class="btn btn-accent" onclick="addLocation()">➕</button>
+        <div class="config-tabs" style="display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap">
+            <button class="btn btn-small btn-primary config-tab-btn" data-tab="locations" onclick="showConfigTab('locations')">📍 Emplacements</button>
+            <button class="btn btn-small btn-secondary config-tab-btn" data-tab="categories" onclick="showConfigTab('categories')">📁 Catégories</button>
+            <button class="btn btn-small btn-secondary config-tab-btn" data-tab="subcategories" onclick="showConfigTab('subcategories')">📂 Sous-catégories</button>
+        </div>
+
+        <div class="config-tab-content" id="config-tab-locations">
+            <div class="settings-card">
+                <h4>📍 Emplacements de stockage</h4>
+                <p class="settings-hint">Gère les emplacements disponibles pour ranger tes produits (Frigo, Cave, Bar...).</p>
+                <div id="locations-list-container" style="margin-top:10px">
+                    <p class="settings-hint">Chargement…</p>
+                </div>
+                <div class="form-group mt-2">
+                    <label>➕ Nouvel emplacement</label>
+                    <div class="barcode-input-row">
+                        <input type="text" id="new-location-icon" class="form-input" style="max-width:70px;text-align:center" placeholder="📦" maxlength="4">
+                        <input type="text" id="new-location-label" class="form-input" placeholder="Es: Cave, Bar, Garage..." onkeydown="if(event.key==='Enter'){event.preventDefault();addLocation()}">
+                        <button class="btn btn-accent" onclick="addLocation()">➕</button>
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="settings-card">
-            <h4>📂 Sous-catégories</h4>
-            <p class="settings-hint">Gère les sous-catégories disponibles pour chaque catégorie de produit.</p>
-            <div class="form-group">
-                <label>Catégorie</label>
-                <select id="subcat-config-category" class="form-input" onchange="onSubcatConfigCategoryChange()"></select>
+
+        <div class="config-tab-content" id="config-tab-categories" style="display:none">
+            <div class="settings-card">
+                <h4>📁 Catégories</h4>
+                <p class="settings-hint">Gère les catégories de produits : icône, libellé, et mots-clés de détection automatique à partir du nom du produit.</p>
+                <div id="categories-list-container" style="margin-top:10px">
+                    <p class="settings-hint">Chargement…</p>
+                </div>
+                <div class="form-group mt-2">
+                    <label>➕ Nouvelle catégorie</label>
+                    <div class="barcode-input-row">
+                        <input type="text" id="new-category-icon" class="form-input" style="max-width:70px;text-align:center" placeholder="📦" maxlength="4">
+                        <input type="text" id="new-category-label" class="form-input" placeholder="Es: Apéritifs, Bébé...">
+                        <button class="btn btn-accent" onclick="addCategory()">➕</button>
+                    </div>
+                    <input type="text" id="new-category-keywords" class="form-input mt-1" placeholder="Mots-clés séparés par des virgules (ex: chips, apéro, biscuit salé)">
+                </div>
             </div>
-            <div class="form-group" style="display:flex;align-items:center;gap:8px">
-                <input type="checkbox" id="subcat-config-required" onchange="toggleSubcategoryRequired()" style="width:auto">
-                <label for="subcat-config-required" style="margin:0">Sous-catégorie obligatoire pour cette catégorie</label>
-            </div>
-            <div id="subcat-list-container" style="margin-top:10px">
-                <p class="settings-hint">Chargement…</p>
-            </div>
-            <div class="form-group mt-2">
-                <label>➕ Nouvelle sous-catégorie (pour la catégorie sélectionnée)</label>
-                <div class="barcode-input-row">
-                    <input type="text" id="new-subcat-label" class="form-input" placeholder="Es: 🍷 Vin, 🍗 Poulet..." onkeydown="if(event.key==='Enter'){event.preventDefault();addSubcategoryRow()}">
-                    <button class="btn btn-accent" onclick="addSubcategoryRow()">➕</button>
+        </div>
+
+        <div class="config-tab-content" id="config-tab-subcategories" style="display:none">
+            <div class="settings-card">
+                <h4>📂 Sous-catégories</h4>
+                <p class="settings-hint">Gère les sous-catégories disponibles pour chaque catégorie de produit.</p>
+                <div class="form-group">
+                    <label>Catégorie</label>
+                    <select id="subcat-config-category" class="form-input" onchange="onSubcatConfigCategoryChange()"></select>
+                </div>
+                <div class="form-group" style="display:flex;align-items:center;gap:8px">
+                    <input type="checkbox" id="subcat-config-required" onchange="toggleSubcategoryRequired()" style="width:auto">
+                    <label for="subcat-config-required" style="margin:0">Sous-catégorie obligatoire pour cette catégorie</label>
+                </div>
+                <div id="subcat-list-container" style="margin-top:10px">
+                    <p class="settings-hint">Chargement…</p>
+                </div>
+                <div class="form-group mt-2">
+                    <label>➕ Nouvelle sous-catégorie (pour la catégorie sélectionnée)</label>
+                    <div class="barcode-input-row">
+                        <input type="text" id="new-subcat-label" class="form-input" placeholder="Es: 🍷 Vin, 🍗 Poulet..." onkeydown="if(event.key==='Enter'){event.preventDefault();addSubcategoryRow()}">
+                        <button class="btn btn-accent" onclick="addSubcategoryRow()">➕</button>
+                    </div>
                 </div>
             </div>
         </div>