Actualiser index.html

index.html

@@ -1756,10 +1756,17 @@
     </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="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>
@@ -1775,6 +1782,28 @@
                     </div>
                 </div>
             </div>
+        </div>
+
+        <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>
+
+        <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>
@@ -1797,6 +1826,7 @@
                     </div>
                 </div>
             </div>
+        </div>
     </section>
     
     <!-- ===== GEMINI CHAT ===== -->