From 168a5df50a6a94cc114cb70d923c5c148539763b Mon Sep 17 00:00:00 2001
From: consultoria-as <ialcarazsalazar@consultoria-as.com>
Date: Wed, 1 Apr 2026 21:02:30 +0000
Subject: [PATCH] fix(pos): filtros de catalogo dinamicos por marca del
 inventario

- Chips de filtro se cargan desde API /catalog/brands
- Muestran marcas reales (Bosch, KYB, NGK...) con conteo
- Boton 'Todos' para quitar filtro
- Filtrado por brand via API en vez de category_id

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 pos/static/js/catalog.js   | 63 +++++++++++++++++++++++++++-----------
 pos/templates/catalog.html | 10 ++----
 2 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/pos/static/js/catalog.js b/pos/static/js/catalog.js
index b91c53b..780275e 100644
--- a/pos/static/js/catalog.js
+++ b/pos/static/js/catalog.js
@@ -392,25 +392,52 @@
         });
     }
 
-    // ─── Filter chips ───
-    document.querySelectorAll('[data-chip]').forEach(function (chip) {
-        chip.addEventListener('click', function () {
-            var isActive = chip.classList.contains('is-active');
-            // Deactivate all chips first for single-select behavior
-            document.querySelectorAll('[data-chip]').forEach(function (c) {
-                c.classList.remove('is-active');
-                c.setAttribute('aria-pressed', 'false');
-            });
-            if (!isActive) {
-                chip.classList.add('is-active');
-                chip.setAttribute('aria-pressed', 'true');
-                currentFilters.category = chip.dataset.chip;
-            } else {
-                delete currentFilters.category;
-            }
-            loadCatalog(1, currentFilters);
+    // ─── Filter chips (dynamic from inventory brands) ───
+    async function loadBrandChips() {
+        var data = await apiFetch(API + '/catalog/brands');
+        if (!data || !data.data) return;
+        var container = document.getElementById('brandChips');
+        if (!container) return;
+        container.innerHTML = '';
+        data.data.forEach(function(b) {
+            var btn = document.createElement('button');
+            btn.className = 'chip';
+            btn.setAttribute('data-chip', b.name);
+            btn.setAttribute('aria-pressed', 'false');
+            btn.textContent = b.name + ' (' + b.count + ')';
+            container.appendChild(btn);
         });
-    });
+        // Re-wire all chip clicks (including the "Todos" chip)
+        wireChipClicks();
+    }
+
+    function wireChipClicks() {
+        document.querySelectorAll('[data-chip]').forEach(function (chip) {
+            chip.addEventListener('click', function () {
+                var isActive = chip.classList.contains('is-active');
+                document.querySelectorAll('[data-chip]').forEach(function (c) {
+                    c.classList.remove('is-active');
+                    c.setAttribute('aria-pressed', 'false');
+                });
+                if (!isActive && chip.dataset.chip) {
+                    chip.classList.add('is-active');
+                    chip.setAttribute('aria-pressed', 'true');
+                    currentFilters.brand = chip.dataset.chip;
+                    delete currentFilters.chip;
+                } else {
+                    // "Todos" or deselect
+                    document.querySelector('[data-chip=""]').classList.add('is-active');
+                    document.querySelector('[data-chip=""]').setAttribute('aria-pressed', 'true');
+                    delete currentFilters.brand;
+                    delete currentFilters.chip;
+                }
+                loadCatalog(1, currentFilters);
+            });
+        });
+    }
+
+    loadBrandChips();
+    wireChipClicks();
 
     // ─── Expose globals for inline onclick handlers ───
     window.CatalogApp = {
diff --git a/pos/templates/catalog.html b/pos/templates/catalog.html
index ac331e1..e76f11a 100644
--- a/pos/templates/catalog.html
+++ b/pos/templates/catalog.html
@@ -1857,14 +1857,8 @@
           </div>
           <div class="filters-row">
             <span class="filters-label">Filtrar:</span>
-            <button class="chip is-active" data-chip="frenos" aria-pressed="true">Frenos</button>
-            <button class="chip" data-chip="motor" aria-pressed="false">Motor</button>
-            <button class="chip" data-chip="suspension" aria-pressed="false">Suspensión</button>
-            <button class="chip" data-chip="electrico" aria-pressed="false">Eléctrico</button>
-            <button class="chip" data-chip="transmision" aria-pressed="false">Transmisión</button>
-            <button class="chip" data-chip="escape" aria-pressed="false">Escape</button>
-            <button class="chip" data-chip="carroceria" aria-pressed="false">Carrocería</button>
-            <button class="chip" data-chip="enfriamiento" aria-pressed="false">Enfriamiento</button>
+            <button class="chip is-active" data-chip="" aria-pressed="true">Todos</button>
+            <span id="brandChips"><!-- loaded by catalog.js --></span>
           </div>
         </div>