From 15a456a0ce8ae7abbe75cbcfb8b8ae9f5984eacf Mon Sep 17 00:00:00 2001
From: Rene Fichtmueller <renefichtmueller@MacStudio-von-Rene-8.local>
Date: Sat, 25 Apr 2026 21:29:25 +0200
Subject: [PATCH] fix: form factor detail panel shows only Flexoptix
 transceivers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- API call: +&vendor=Flexoptix filter
- Section renamed to 'Flexoptix-Lösungen' with favicon
- Each row shows 'Shop ↗' link directly to flexoptix.net search
- 'Show all' button labeled 'Alle X Flexoptix-{FF}-Produkte'
- Primary button: flexoptix.net with form factor filter
- Empty state: friendly message when no Flexoptix products yet
---
 packages/dashboard/index.html | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/dashboard/index.html b/packages/dashboard/index.html
index 80f5bab..b98b52d 100644
--- a/packages/dashboard/index.html
+++ b/packages/dashboard/index.html
@@ -4861,9 +4861,10 @@ async function openFormFactorDetail(name) {
   // Open panel immediately with skeleton
   openPanel('<div style="padding:0.5rem;color:var(--text-dim);font-size:0.85rem" class="loading pulse">Lade ' + esc(name) + '…</div>');
 
-  // Fetch transceivers for this form factor
-  var txData  = await api('/api/transceivers?form_factor=' + encodeURIComponent(f.name) + '&limit=10').catch(function(){ return {}; });
+  // Fetch Flexoptix transceivers for this form factor
+  var txData  = await api('/api/transceivers?form_factor=' + encodeURIComponent(f.name) + '&vendor=Flexoptix&limit=10').catch(function(){ return {}; });
   var txRows  = txData.data || [];
+  var txTotal = txData.total || txRows.length;
 
   var h = '';
 
@@ -4950,39 +4951,42 @@ async function openFormFactorDetail(name) {
 
   // ── Transceivers in Catalog ────────────────────────────────────────────────
   h += '<div style="margin-bottom:0.85rem">';
-  h += '<div style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin-bottom:0.45rem">';
-  h += 'Unsere Transceiver (' + (f.transceiver_count || txRows.length) + ' in Datenbank)';
+  h += '<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.45rem">';
+  h += '<div style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim)">Flexoptix-Lösungen</div>';
+  h += '<img src="https://www.flexoptix.net/favicon.ico" onerror="this.style.display=\'none\'" style="width:12px;height:12px;border-radius:2px">';
+  h += (txTotal > 0 ? '<span style="font-size:0.68rem;color:var(--accent);font-weight:600;margin-left:auto">' + txTotal + ' verfügbar</span>' : '');
   h += '</div>';
   if (txRows.length) {
     var speedColors2 = { 1600:'#7c3aed', 800:'#c1121f', 400:'#FF8100', 200:'#e6a800', 100:'#2d6a4f', 40:'#4287f5', 25:'#0ea5e9', 10:'#888', 1:'#555' };
     h += '<div style="display:flex;flex-direction:column;gap:0.3rem">';
-    txRows.slice(0,8).forEach(function(t) {
+    txRows.forEach(function(t) {
       var spCol = speedColors2[t.speed_gbps] || '#888';
       var reach = t.reach_label || (t.reach_meters ? (t.reach_meters >= 1000 ? (t.reach_meters/1000)+'km' : t.reach_meters+'m') : '');
+      var shopUrl = 'https://www.flexoptix.net/en/search/ajax/suggest/?q=' + encodeURIComponent(t.part_number || '');
       h += '<div style="display:flex;align-items:center;gap:0.5rem;padding:0.35rem 0.6rem;background:var(--surface3);border-radius:7px;cursor:pointer" onclick="closePanel();openTxDetail(\'' + esc(t.id) + '\')">'
         + '<span style="background:' + spCol + '22;color:' + spCol + ';padding:1px 6px;border-radius:5px;font-size:0.68rem;font-weight:700;white-space:nowrap">' + (t.speed_gbps || '?') + 'G</span>'
         + '<span style="font-size:0.78rem;font-weight:600;color:var(--text-bright);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc(t.part_number || '—') + '</span>'
-        + (t.vendor_name ? '<span style="font-size:0.68rem;color:var(--text-dim);white-space:nowrap">' + esc(t.vendor_name) + '</span>' : '')
         + (reach ? '<span style="font-size:0.68rem;color:var(--cyan);white-space:nowrap">' + esc(reach) + '</span>' : '')
+        + '<a href="' + esc(shopUrl) + '" target="_blank" rel="noopener" onclick="event.stopPropagation()" style="font-size:0.65rem;color:var(--accent);white-space:nowrap;text-decoration:none" title="Im Webshop ansehen">Shop ↗</a>'
         + '</div>';
     });
     h += '</div>';
-    if ((f.transceiver_count || 0) > 8) {
+    if (txTotal > 10) {
       h += '<button class="btn" style="width:100%;margin-top:0.5rem;font-size:0.78rem;background:var(--surface3);color:var(--text)" '
         + 'onclick="goToTab(\'transceivers\');el(\'tx-search\').value=\'' + esc(f.name) + '\';searchTransceivers();closePanel()">'
-        + 'Alle ' + (f.transceiver_count || '') + ' ' + esc(f.name) + '-Transceiver anzeigen →</button>';
+        + 'Alle ' + txTotal + ' Flexoptix-' + esc(f.name) + '-Produkte anzeigen →</button>';
     }
   } else {
-    h += '<div style="font-size:0.8rem;color:var(--text-dim);padding:0.5rem 0">Noch keine Transceiver in der Datenbank.</div>';
+    h += '<div style="font-size:0.8rem;color:var(--text-dim);padding:0.5rem 0;border:1px dashed var(--border);border-radius:6px;text-align:center">Noch keine Flexoptix-Produkte für ' + esc(f.name) + ' in der Datenbank.</div>';
   }
   h += '</div>';
 
   // ── Action buttons ─────────────────────────────────────────────────────────
   h += '<div style="display:flex;gap:0.5rem;flex-wrap:wrap">';
-  h += '<button class="btn" style="flex:1;background:' + fCl + ';color:#fff;font-size:0.8rem" '
+  h += '<a href="https://www.flexoptix.net/en/optical-transceivers/?form_factor=' + encodeURIComponent(f.name.toLowerCase().replace(/[^a-z0-9]/g,'-')) + '" target="_blank" rel="noopener" class="btn" style="flex:1;background:#FF8100;color:#fff;font-size:0.8rem;text-align:center;text-decoration:none">flexoptix.net — ' + esc(f.name) + ' ↗</a>';
+  h += '<button class="btn" style="font-size:0.8rem;background:var(--surface3);color:var(--text)" '
     + 'onclick="goToTab(\'transceivers\');el(\'tx-search\').value=\'' + esc(f.name) + '\';searchTransceivers();closePanel()">'
-    + 'Alle Transceiver anzeigen →</button>';
-  h += '<a href="https://www.flexoptix.net/en/search/ajax/suggest/?q=' + encodeURIComponent(f.name) + '" target="_blank" rel="noopener" class="btn" style="font-size:0.8rem;text-decoration:none">flexoptix.net ↗</a>';
+    + 'TIP DB →</button>';
   h += '</div>';
 
   // ── Technical notes ────────────────────────────────────────────────────────