routes updated

public/components/recommendations-crud.js

@@ -1,4 +1,6 @@
 import { api } from "../lib/api.js";
+import { on } from "../lib/bus.js";
+import { navigateToItem } from "../lib/router.js";
 
 class RecommendationsCrud extends HTMLElement {
   static get observedAttributes() {
@@ -183,10 +185,21 @@ class RecommendationsCrud extends HTMLElement {
 
     this.shadowRoot.getElementById("newBtn").onclick = () => this.showCreateForm();
 
+    // Escuchar cambios de ruta para deep-linking
+    this._unsubRouter = on("router:viewChanged", ({ view, params }) => {
+      if (view === "crosssell" && params.id) {
+        this.selectItemById(params.id);
+      }
+    });
+
     this.load();
     this.loadProducts();
   }
 
+  disconnectedCallback() {
+    this._unsubRouter?.();
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "rule-type" && oldValue !== newValue) {
       this.filterRuleType = newValue;
@@ -223,6 +236,15 @@ class RecommendationsCrud extends HTMLElement {
       this.items = items;
       this.loading = false;
       this.renderList();
+      
+      // Si hay un item pendiente de selección (deep-link), seleccionarlo
+      if (this._pendingItemId) {
+        const item = this.items.find(i => i.id === this._pendingItemId);
+        if (item) {
+          this.selectItem(item, { updateUrl: false });
+        }
+        this._pendingItemId = null;
+      }
     } catch (e) {
       console.error("Error loading recommendations:", e);
       this.items = [];
@@ -302,7 +324,7 @@ class RecommendationsCrud extends HTMLElement {
     }
   }
 
-  async selectItem(item) {
+  async selectItem(item, { updateUrl = true } = {}) {
     // Cargar detalles incluyendo items
     try {
       const detail = await api.getRecommendation(item.id);
@@ -320,6 +342,25 @@ class RecommendationsCrud extends HTMLElement {
     
     this.renderList();
     this.renderForm();
+    
+    // Actualizar URL
+    if (updateUrl && this.selected) {
+      navigateToItem("crosssell", this.selected.id);
+    }
+  }
+
+  selectItemById(ruleId) {
+    const id = parseInt(ruleId);
+    if (!id) return;
+    
+    // Buscar en los items cargados
+    const item = this.items.find(i => i.id === id);
+    if (item) {
+      this.selectItem(item, { updateUrl: false });
+    } else {
+      // Guardar el ID pendiente para seleccionar después de cargar
+      this._pendingItemId = id;
+    }
   }
 
   showCreateForm() {